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"
                disabled
                style="width: 200px"
              />
            </el-form-item>
         </el-col>

        <el-col :span="1.5">
            <el-form-item label="组织" prop="org" :rules="{ required: true, message: '请选择组织', trigger: 'blur' }">
              <el-select clearable size="small" v-model="basicForm.org" :disabled="sonDisable" @focus="chooseOrg('ORG_PARAM', true, '选择组织')" style="width: 200px">
                <el-option v-for="item in orgOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
         </el-col>

         <el-col :span="1.5">
            <el-form-item label="需求处理方式">
              <el-select disabled v-model="basicForm.demandBusinessType" size="small" style="width: 200px">
                <el-option v-for="dict in dict.type.sys_processing_mode" :key="dict.value" :label="dict.label" :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

         <el-col :span="1.5">
            <el-form-item label="单据状态">
              <el-select disabled v-model="basicForm.status" size="small" style="width: 200px">
                <el-option v-for="dict in dict.type.sys_status" :key="dict.value" :label="dict.label" :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

         <el-col :span="1.5">
            <el-form-item label="需求客户">
              <el-select clearable size="small" v-model="basicForm.customer" :disabled="sonDisable" @clear="cleanCustomer" @focus="chooseOrg('CUSTOMER_PARAM', true, '选择客户')" style="width: 200px">
                <el-option v-for="item in customerOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>

         <el-col :span="1.5">
            <el-form-item label="需求客户名称">
              <el-input disabled v-model="basicForm.customerName" size="small" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>

         <el-col :span="1.5">
            <el-form-item label="客户负责人">
              <el-input disabled v-model="basicForm.customerPrincipal" size="small" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>

         <el-col :span="1.5">
            <el-form-item label="需求人员">
                <el-select clearable size="small" v-model="basicForm.demandPersonal" :disabled="sonDisable" @focus="chooseOrg('CONTACTS_PARAM', true, '需求人员')" style="width: 200px">
                  <el-option v-for="item in personOptions" :key="item.id" :label="item.name" :value="item.code" />
                </el-select>
            </el-form-item>
          </el-col>

         <el-col :span="1.5">
            <el-form-item label="需求部门">
              <el-select clearable v-model="basicForm.demandDept" size="small" :disabled="sonDisable" @focus="chooseOrg('DEPT_PARAM', true, '需求部门')" style="width: 200px">
                <el-option
                  v-for="item in deptOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="需求日期" prop="demandDate" :rules="{ required: true, message: '请选择需求日期', trigger: 'blur' }">
              <el-date-picker
                v-model="basicForm.demandDate"
                :disabled="sonDisable"
                clearable
                type="date"
                value-format="yyyy-MM-dd"
                @change="changeDemandDate"
                size="small"
                style="width: 200px"
              >
              </el-date-picker>
            </el-form-item>
         </el-col>

          <el-col :span="1.5">
            <el-form-item label="单据来源">
              <el-select v-model="basicForm.source" disabled size="small" style="width: 200px">
                <el-option v-for="dict in dict.type.sys_bill_source" :key="dict.value" :label="dict.label" :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
         </el-col>

         <el-col :span="1.5">
            <el-form-item label="业务类型">
              <el-select clearable v-model="basicForm.billType" @change="changeBillType" :disabled="sonDisable" size="small" style="width: 200px">
                <el-option v-for=" dict in dict.type.sys_business" :key="dict.value" :label="dict.label" :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="1.5">
            <el-form-item label="是否客户指定">
              <el-select clearable v-model="basicForm.isSpeical" :disabled="sonDisable" size="small" style="width: 200px">
                <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.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.trim="basicForm.remark"
                size="small"
                :disabled="sonDisable"
                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" v-if="!sonDisable">增行</el-button>
        <el-button type="primary" size="small" v-if="!sonDisable">批量调整</el-button>
        <el-button type="primary" size="small" v-if="sonPageStu == 'check' || sonPageStu == 'edit'" @click="showReserved">货权预留单</el-button>
      </div>

      <el-table 
          :data="basicForm.puDemandItemList" 
          fit
          max-height="300"
          @selection-change="handleSelectionChange"
        >
          <el-table-column show-overflow-tooltip type="selection"/>
          <el-table-column show-overflow-tooltip label="序号" type="index" align="center"/>
          <el-table-column show-overflow-tooltip label="行状态" align="center" prop="status" :formatter="hangStatus" width="150px"/>
          <el-table-column show-overflow-tooltip label="行号" align="center" prop="rowNo" />
          <!-- <el-table-column show-overflow-tooltip label="业务部门名称" align="center" width="180px"/> -->
          <!-- <el-table-column show-overflow-tooltip label="业务部门" align="center" width="180px"/> -->
          <el-table-column show-overflow-tooltip label="需求客户" align="center"  prop="demandCustomerName" width="200px"/>
          <el-table-column show-overflow-tooltip label="一级品类" align="center" prop="materialClassifyOneName" width="180px">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input readonly size="small" v-model="scope.row.materialClassifyOneName"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="二级品类" align="center" prop="materialClassifyTwoName" width="180px">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input readonly size="small" v-model="scope.row.materialClassifyTwoName"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="三级品类" align="center" prop="materialClassifyThreeName" width="180px">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input readonly size="small" v-model="scope.row.materialClassifyThreeName"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="四级品类" align="center" prop="materialClassifyFourName" width="180px">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input readonly size="small" v-model="scope.row.materialClassifyFourName"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="采购员名称" align="center" prop="buyerName" width="120px"/>
          <el-table-column show-overflow-tooltip label="采购员" align="center"  prop="buyer"/>
          <el-table-column show-overflow-tooltip label="物料编码" align="center" prop="materialCode" width="230px">
            <template slot-scope="scope">
              <el-form-item class="hang" :prop="'puDemandItemList.' + scope.$index + '.' + 'materialCode'" :rules="{ required: true, message: '请选择物料编码', trigger: 'blur' }">
                <el-input clearable :disabled="sonDisable" size="small" v-model="scope.row.materialCode" @focus="chooseMaterial(scope.$index)">
                  <el-button size="small" :disabled="sonDisable" slot="append" icon="el-icon-more" @click="chooseMaterial(scope.$index)"></el-button>
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="物料名称" align="center"  prop="materialName" width="230px" />
          <el-table-column show-overflow-tooltip label="规格" align="center"  prop="specification" />
          <el-table-column show-overflow-tooltip label="型号" align="center"  prop="model"/>
          <el-table-column show-overflow-tooltip label="单位" align="center"  prop="unitName"/>
          <el-table-column show-overflow-tooltip label="生产厂家/代理人" align="center"  prop="manufacturerName" width="230px"/>
          <el-table-column show-overflow-tooltip label="注册人" align="center"  prop="registrant" width="150px"/>
          <el-table-column show-overflow-tooltip label="采购周期" align="center"  prop="puPeriod" width="150px">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input clearable :readonly="sonDisable" size="small" v-model="scope.row.puPeriod"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="有效期" align="center"  prop="expiry" width="120px"/>
          <el-table-column show-overflow-tooltip label="有效期单位" align="center"  prop="expiryUnit" width="120px"/>
          <el-table-column show-overflow-tooltip label="最小包装" align="center"  prop="minPackage" width="120px"/>
          <el-table-column show-overflow-tooltip label="最小订货量" align="center"  prop="minOrderQty" width="120px"/>
          <el-table-column show-overflow-tooltip label="最小批量" align="center"  prop="minBatch" width="120px"/>
          <el-table-column show-overflow-tooltip label="安全库存" align="center"  prop="safeStock" width="120px">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input clearable :readonly="sonDisable" size="small" v-model="scope.row.safeStock"/>
              </el-form-item>
            </template>
          </el-table-column>
            <el-table-column show-overflow-tooltip label="预留比例" align="center" prop="reservedProportion" width="150px">
              <template slot-scope="scope">
                <el-form-item class="hang">
                  <el-select clearable :disabled="sonDisable" size="small" v-model="scope.row.reservedProportion" @change="getYLSL(scope)">
                    <el-option v-for=" dict in dict.type.sys_reserve_ratio" :key="dict.value" :label="dict.label" :value="dict.value">
                    </el-option>
                  </el-select>
                  <!-- <el-input v-model="scope.row.reservedProportion"/> -->
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="预留周期" align="center" prop="reservedPeriod" width="150px">
              <template slot-scope="scope">
                <el-form-item class="hang" :prop="'puDemandItemList.' + scope.$index + '.' + 'reservedPeriod'" :rules="{ required: isYl, message: '请填写预留周期', trigger: 'blur' }">
                  <el-input clearable :readonly="sonDisable" size="small" v-model="scope.row.reservedPeriod"/>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="预留数量" align="center"  prop="reservedQty" width="150px">
              <template slot-scope="scope">
                <el-form-item class="hang">
                  <el-input readonly size="small" v-model="scope.row.reservedQty"/>
                </el-form-item>
              </template>
            </el-table-column>
          <el-table-column show-overflow-tooltip label="月均销量" align="center"  prop="averageQtyMonth" width="120px"/>
          <el-table-column show-overflow-tooltip label="实际(业务)需求量" align="center"  prop="qty" width="120px">
            <template slot-scope="scope">
              <el-form-item class="hang" :prop="'puDemandItemList.' + scope.$index + '.' + 'qty'" :rules="{ required: true, message: '请填写实际(业务)需求量', trigger: 'blur' }">
                <el-input clearable :readonly="sonDisable" size="small" v-model="scope.row.qty" @input="getYLSL(scope)"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="需求可用周期" align="center"  prop="demandPeriod" width="120px"/>
          <el-table-column show-overflow-tooltip label="集团预测分类" align="center"  prop="forecastClassify" width="120px"/>
          <el-table-column show-overflow-tooltip label="近一月需求" align="center"  prop="onemonthAvgVolume" width="120px"/>
          <el-table-column show-overflow-tooltip label="近三月需求" align="center"  prop="threemonthAvgVolume" width="120px"/>
          <el-table-column show-overflow-tooltip label="交货日期" align="center"  prop="deliveryDate" width="230px">
            <template slot-scope="scope">
              <el-form-item class="hang" :prop="'puDemandItemList.' + scope.$index + '.' + 'deliveryDate'" :rules="{ required: true, message: '请填写交货日期', trigger: 'blur' }">
                <el-date-picker
                  v-model="scope.row.deliveryDate"
                  :readonly="sonDisable"
                  clearable
                  type="date"
                  size="small"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptionsEnd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="补单标识" align="center"  prop="isReplenishment" width="100px">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-switch
                  v-model="scope.row.isReplenishment"
                  disabled
                  active-value="Y"
                  inactive-value="N"
                  active-color="#13ce66"
                  inactive-color="#a1a3a9">
                </el-switch>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="批号锁定标识" align="center" prop="isBatchLock" width="100px">
            <template slot-scope="scope">
              <el-form-item class="hang">
                  <el-switch
                    v-model="scope.row.isBatchLock"
                    :disabled="sonDisable"
                    active-value="Y"
                    inactive-value="N"
                    active-color="#13ce66"
                    inactive-color="#a1a3a9">
                  </el-switch>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="业务备注" align="center"  prop="remark" width="150px">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input clearable :readonly="sonDisable" size="small" v-model="scope.row.remark"/>
              </el-form-item>
            </template>
          </el-table-column> 
          <el-table-column show-overflow-tooltip label="采购备注" align="center"  prop="puRemark" width="150px"/>
          <!-- <el-table-column show-overflow-tooltip label="末级供应仓库存量" align="center"  prop="lastWarehouseQty" /> -->
          <el-table-column show-overflow-tooltip label="调拨占有量" align="center"  prop="superiorAllotQty" width="150px"/>
          <el-table-column show-overflow-tooltip label="最终净需求量" align="center"  prop="resDemandQty" width="150px">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input clearable :readonly="sonDisable" size="small" v-model="scope.row.resDemandQty"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="最终采购执行数量" align="center"  prop="executeQty" width="150px">
            <template slot-scope="scope">
              {{scope.row.executeQty ? scope.row.executeQty : 0 }}
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="收货仓库" align="center"  prop="deliveryWarehouseName" width="200px">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input clearable :disabled="sonDisable" size="small" v-model="scope.row.deliveryWarehouseName" @clear="clearHang(scope.$index, '选择收货仓库')" @focus="chooseDept(scope.$index, 'WAREHOUSE_PARAM', true, '选择收货仓库')">
                  <el-button size="small" :disabled="sonDisable" slot="append" icon="el-icon-more" @click="chooseDept(scope.$index, 'WAREHOUSE_PARAM', true, '选择收货仓库')"></el-button>
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="收货货位" align="center"  prop="deliveryAllocationName" width="200px">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input clearable :disabled="sonDisable" size="small" v-model="scope.row.deliveryAllocationName" @clear="clearHang(scope.$index, '选择收货货位')" @focus="choosehuoWei(scope.$index, 'ALLOCATION_PARAM', true, '选择收货货位', scope.row.deliveryWarehouse)">
                  <el-button size="small" :disabled="sonDisable" slot="append" icon="el-icon-more" @click="choosehuoWei(scope.$index, 'ALLOCATION_PARAM', true, '选择收货货位', scope.row.deliveryWarehouse)"></el-button>
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <!-- <el-table-column show-overflow-tooltip label="收货货位编码" align="center"  prop="deliveryAllocation" width="200px"/> -->
          <el-table-column show-overflow-tooltip label="末级供应仓库" align="center"  prop="lastWarehouseName" width="200px"/>
          <el-table-column show-overflow-tooltip label="末级供应货位" align="center"  prop="lastAllocationName" width="200px"/>
          <el-table-column show-overflow-tooltip label="紧急标识" align="center" prop="isUrgency" width="100px">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-switch
                  v-model="scope.row.isUrgency"
                  disabled
                  active-value="Y"
                  inactive-value="N"
                  active-color="#13ce66"
                  inactive-color="#a1a3a9">
                </el-switch>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="默认采购组织" align="center"  prop="purOrgName" width="200px"/>yu
          <el-table-column show-overflow-tooltip label="默认采购组织编码" align="center"  prop="puOrg" width="200px"/>
          <!-- <el-table-column show-overflow-tooltip label="末级供应调拨待入量" align="center"  prop="lastStockQty" width="150px"/> -->
          <!-- <el-table-column show-overflow-tooltip label="上级供应中心现存量" align="center"  prop="superiorCenterQty" width="200px"/> -->
          <!-- <el-table-column show-overflow-tooltip label="上级库存被调拨占用量" align="center"  prop="superiorAllotQty" width="200px"/> -->
          <el-table-column show-overflow-tooltip label="可用量" align="center"  prop="availableQty"/>
          <el-table-column show-overflow-tooltip label="调拨状态" align="center"  prop="statusAllot" width="100px">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-switch
                  v-model="scope.row.statusAllot"
                  :disabled="sonDisable"
                  active-value="Y"
                  inactive-value="N"
                  active-color="#13ce66"
                  inactive-color="#a1a3a9">
                </el-switch>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="补单供应商编码" align="center"  prop="additionalSupplier" width="200px">
            <template slot-scope="scope">
              <el-form-item class="hang" :prop="'puDemandItemList.' + scope.$index + '.' + 'additionalSupplier'" :rules="{ required: isBDXQ, message: '请选择补单供应商', trigger: 'blur' }">
                <el-input clearable :disabled="sonDisable || BDZT" size="small" v-model="scope.row.additionalSupplier" @clear="clearHang(scope.$index, '选择补单供应商')" @focus="chooseDept(scope.$index, 'SUPPLIER_PARAM', true, '选择补单供应商')">
                  <el-button size="small" :disabled="sonDisable || BDZT" slot="append" icon="el-icon-more" @click="chooseDept(scope.$index, 'SUPPLIER_PARAM', true, '选择补单供应商')"></el-button>
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="补单供应商名称" align="center"  prop="additionalSupplierName" width="200px">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input readonly size="small" v-model="scope.row.additionalSupplierName"/>
              </el-form-item>
            </template>
          </el-table-column>
          <!-- <el-table-column show-overflow-tooltip label="周期单位" align="center"  prop="periodUnit" width="150px">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-select clearable :disabled="sonDisable" size="small" v-model="scope.row.periodUnit">
                  <el-option v-for=" dict in dict.type.sys_period_unit" :key="dict.value" :label="dict.label" :value="dict.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column> -->
          <el-table-column show-overflow-tooltip label="末级供应库存组织" align="center" prop="superiorStockOrgName" width="200px"></el-table-column>
          <el-table-column show-overflow-tooltip label="中心仓可用量" align="center"  prop="centralWarehouseQty" width="200px"/>
          <el-table-column show-overflow-tooltip label="调拨单号" align="center"  prop="allotCode"></el-table-column>
          <el-table-column show-overflow-tooltip label="收货地址" align="center"  prop="deliveryAddressName" width="200px">
            <template slot-scope="scope">
              <el-form-item class="hang">
                <el-input clearable :disabled="sonDisable" size="small" v-model="scope.row.deliveryAddressName" @clear="clearHang(scope.$index, '选择收货地址')" @focus="chooseDept(scope.$index, 'ADDRESS_PARAM', true, '选择收货地址')">
                  <el-button size="small" :disabled="sonDisable" slot="append" icon="el-icon-more" @click="chooseDept(scope.$index, 'ADDRESS_PARAM', true, '选择收货地址')"></el-button>
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <!-- <el-table-column show-overflow-tooltip label="收货地址编码" align="center" prop="deliveryAddress" width="200px"></el-table-column> -->
          <el-table-column show-overflow-tooltip label="联系人" align="center"  prop="contacts"/>
          <el-table-column show-overflow-tooltip label="联系人电话" align="center"  prop="contactsPhone" width="200px"/>
          <el-table-column show-overflow-tooltip label="详细地址" align="center"  prop="address" width="200px"/>
          <el-table-column show-overflow-tooltip label="价格类型" align="center"  prop="priceType" width="150px">
            <template slot-scope="scope">
              <el-form-item class="hang" :prop="'puDemandItemList.' + scope.$index + '.' + 'priceType'" :rules="{ required: true, message: '请选择价格类型', trigger: 'blur' }">
                <el-select clearable :disabled="sonDisable" size="small" v-model="scope.row.priceType">
                  <el-option v-for=" dict in dict.type.sys_price_type" :key="dict.value" :label="dict.label" :value="dict.value">
                  </el-option>
                </el-select>
                <!-- <el-input v-model="scope.row.periodUnit"/> -->
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            >
          <template slot-scope="scope">
            <el-button type="text" size="small" :disabled="sonDisable" @click="delLine(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </el-form>

    <div class="btn_group">
      <el-col :span="1.5">
        <el-button type="primary" size="small" plain @click="copy" v-if="sonPageStu == 'check'">复制</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" size="small" plain @click="save" v-if="sonPageStu == 'add' || sonPageStu == '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="sonPageStu == 'check' && (row.status == '0' || row.status == '3')">提交</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"/>

      <Refers ref="refer" @doSubmit="selectionsToInput" :single="true"/>

      <popDialog ref="materialRefer" @doSubmit="selectMaterial" :single="true" />

    </div>
  </div>
</template>

<script>
import Reserved from './reserved.vue'
import Refers from '@/components/Refers/refers.vue'
import {addDemand,getDemandDetail, getDemandSonDetail, editDemand, submitDemand, queryMan } from '@/api/purchase/purchaseDemand.js'
// 用于回显参照框数据
import {getRefer} from '@/api/purchase/basic.js'
// 明细行选择物料参照
import popDialog from '@/components/PopDialog/index.vue'
export default {
  name: 'addDemandList',
  props: ['pageStu','row', 'disable'],
  dicts: ['sys_processing_mode', 'sys_status', 'sys_bill_source', 'sys_business','sys_reserve_ratio', 'sys_period_unit', 'sys_price_type'],
  components: {
    Reserved,
    Refers,
    popDialog
  },
  model: {
    prop: 'isList',
    event: 'jugislist'
  },
  data() {
    return {
      // 不能直接改变props传来的值
      sonPageStu: this.pageStu,
      sonDisable: this.disable,
      // BDZT是补单供应商是否可以编辑条件
      BDZT: true,
      dialog: {
        config: false
      },
      basicForm: {
        code: '',
        org: '',
        orgName: '',
        demandBusinessType: '1',
        status: '0',
        customer: '',
        customerName: '',
        customerCode: '',
        customerPrincipal: '',
        demandPersonal: '',
        demandDept: '',
        demandDate: '',
        source: '4',
        billType: 'ZQBH',
        isSpeical: '',
        isProcess: '',
        isMonthleyCalculate: '',
        remark: '',
        puDemandItemList: []
      },
      options: [{
        value: 'Y', label: '是',
      }, {
        value: 'N', label: '否'
      }],
      basicRules: {},
      tableList: [],
      referCondition: {
        type: '',
        isPage: true,
        title: '',
      },
      // referCondition: {
      //   type: '',
      //   isPage: true,
      //   title: '',
      // },
      tableIndex: null,
      orgOptions: [],
      personOptions: [],
      deptOptions: [],
      customerOptions: [],
      pickerOptionsEnd: {
        disabledDate: (time) => {
          let beginDateVal = this.basicForm.demandDate;
          if (beginDateVal) {
            return (
              time.getTime() <
              new Date(beginDateVal).getTime() - 8.64e7
            );
          }
        }
      },
      isBDXQ: false,
      isYl: false
    }
  },
  created() {
    if(this.pageStu == 'check') {
      console.log('数据', this.row)
      this.getDetails(this.row)
    } else if(this.pageStu == 'edit') {
      this.getDetails(this.row)
    }
  },
  methods: {
    // 改变单据日期时清空子表的调拨日期
    changeDemandDate() {
      this.basicForm.puDemandItemList.forEach(item => {
        item.deliveryDate = null
      })
    },
    // 更改业务类型调整明细行内补单或紧急标识
    changeBillType() {
      if (this.basicForm.billType == 'BDXQ' && this.basicForm.puDemandItemList.length != 0) {
        this.isBDXQ = true
        this.BDZT = false
        this.basicForm.puDemandItemList.forEach(item => {item.isReplenishment = 'Y'})
      } else {
        this.isBDXQ = false
        this.BDZT = true
        this.basicForm.puDemandItemList.forEach(item => { 
          item.isReplenishment = 'N' 
          item.additionalSupplier = null
          item.additionalSupplierName = null
        })
      }
      if (this.basicForm.billType == 'JJXQ' && this.basicForm.puDemandItemList.length != 0) {
        this.basicForm.puDemandItemList.forEach(item => {item.isUrgency = 'Y'})
      } else {
        this.basicForm.puDemandItemList.forEach(item => { item.isUrgency = 'N' })
      }
    },
    hangStatus(row) {
      switch (row.status) {
        case '0':
          return '需补货'
        case '1':
          return '待计划确认'
        case '2':
          return '计划已确认'
        case '3':
          return '计划已审核'
        case '4':
          return '行关闭'
        case '5':
          return '总供应可满足'
      }
    },
    // 获取预留数量
    getYLSL(scope) {
      scope.row.reservedQty = Math.ceil(scope.row.reservedProportion.replace('%', '') / 100 * scope.row.qty)
      // 如果选择预留比例,预留周期必填
      if(scope.row.reservedQty && scope.row.reservedQty !== 0) {
        this.isYl = true
      } else {
        this.isYl = false
      }
    },
    copy() {
      this.$modal.msgSuccess("复制成功");
      this.sonPageStu = 'add'
      this.sonDisable = false
      this.getDetails(this.row)
      this.basicForm.id = ''
      this.basicForm.code = ''
      this.basicForm.createBy = ''
    },
    handleData() {
      console.log('222')
      // 复制新增把id,编码,创建人置为空,子表去掉id
      this.basicForm.id = ''
      this.basicForm.code = ''
      this.basicForm.createBy = ''
      if (this.basicForm.puDemandItemList.length !== 0) {
        this.basicForm.puDemandItemList.forEach(item => {
          if (item.id) {
            delete item.id
          }
          if (item.demandId) {
            delete item.demandId
          }
        })
      }
    },
    async save() {
      if(this.basicForm.puDemandItemList.length !== 0) {
        this.$refs['basic'].validate((valid) => {
          if(valid) {
            if(this.sonPageStu == 'add') {
              this.handleData()
              addDemand(this.basicForm).then(res => {
                console.log(333)
                if (res.code === 200) {
                  this.$modal.msgSuccess("保存成功");
                  this.$emit('jugislist', true)
                  let queryParams = {
                    pageNum: 1,
                    pageSize: 10
                  }
                  this.$emit('refresh', queryParams)
                }
              })
            } else if (this.sonPageStu == 'edit') {
              editDemand(this.basicForm).then(res => {
                if (res.code === 200) {
                  this.$modal.msgSuccess("编辑成功");
                  this.back()
                }
              })
            }
          }
        })
      } else {
        this.$modal.msgWarning("明细信息不能为空！");
      }
    },
    submit() {
      submitDemand(this.basicForm).then(res => {
        if (res.code === 200) {
          this.$modal.msgSuccess("提交成功");
          this.back()
        }
      })
    },
    // 增行
    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,
        material: null,
        materialName: null,
        classifyId: null,
        specification: null,
        unit: null,
        unitName: null,
        manufacturerName: null,
        registrant: null,
        puPeriod: null,
        expiryUnit: null,
        expiry: 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,
        onemonthAvgVolume: null,
        threemonthAvgVolume: null,
        deliveryDate: null,
        isUrgency: this.basicForm.billType == 'JJXQ' ? 'Y' : 'N',
        isReplenishment: this.basicForm.billType == 'BDXQ'? 'Y': 'N',
        isBatchLock: 'N',
        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: 'N',
        additionalSupplier: null,
        additionalSupplierName: null,
        periodUnit: null,
        demandCustomer: this.basicForm.customer,
        demandCustomerName: this.basicForm.customerName,
        businessDept: this.basicForm.demandDept,
        businessDeptName: null,
        lastStockOrg: null,
        lastStockOrgName: null,
        superiorStockOrg: null,
        superiorStockOrgName: null,
        allotCode: null,
        deliveryAddress: null,
        deliveryAddressName: null,
        contacts: null,
        contactsPhone: null,
        address: null,
        source: null,
        priceType: 'order',
        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: 0,
        // 新增字段
        model: null,
        storageCondition: null,
        transportationCondition: null,
      }
      this.basicForm.puDemandItemList.push(newLine)
      // 补单需求状态改变
      if (this.basicForm.billType == 'BDXQ') {
        this.BDZT = false
      } else {
        this.BDZT = true
      }
    },
    delLine(index) {
      console.log('删除行:', index)
      // this.basicForm.puDemandItemList = this.basicForm.puDemandItemList.filter(item => {
      //   return item.id !== row.id
      // })
      this.basicForm.puDemandItemList.splice(index,1)
    },
    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.data
              console.log('reciveForm',reciveForm)
              this.basicForm = reciveForm
              if(this.basicForm.org) { this.reBackRefer('ORG_PARAM', this.basicForm.org) }
              if(this.basicForm.customer) { this.reBackRefer('CUSTOMER_PARAM', this.basicForm.customer) }
              if(this.basicForm.demandPersonal) { this.reBackRefer('CONTACTS_PARAM', this.basicForm.demandPersonal) }
              if(this.basicForm.demandDept) { this.reBackRefer('DEPT_PARAM', this.basicForm.demandDept) }
              // 详情时将收货仓库id赋值给stordocId
              // 如果业务类型为补单需求，则明细内补单供应商编码可以编辑
              if(this.basicForm.billType == 'BDXQ') {
                 this.BDZT = false 
                 this.isBDXQ = true
              } else {
                 this.BDZT = true
                 this.isBDXQ = false
              }
            }
          })
        }
      })
    },
    handleSelectionChange() {},
    // 点击预留单展示
    showReserved() {
      this.dialog.config = true
    },
    // 修改是否让页面显示与隐藏的事件
	  updateReserved (val) {
      this.dialog.config = val
    },
    // 回显参照框
    reBackRefer(type, id) {
      getRefer({type: type, id: id}).then(res => {
        if(type == 'ORG_PARAM') {
          this.orgOptions = res.rows
        }
        if (type == 'CUSTOMER_PARAM') {
          this.customerOptions = res.rows
        }
        if (type == 'CONTACTS_PARAM') {
          this.personOptions = res.rows
        }
        if (type == 'DEPT_PARAM') {
          this.deptOptions = res.rows
        }
      })
    },
    chooseOrg(type, isPage, title) {
      this.referCondition.type = type
      this.referCondition.isPage = isPage
      this.referCondition.title = title
      this.$refs.refer.init(this.referCondition)
    },
    selectionsToInput(selection) {
      if(this.referCondition.type == 'ORG_PARAM' && this.referCondition.title == '选择组织') {
        this.orgOptions = selection
        this.basicForm.org = selection[0].id
        this.basicForm.orgName = selection[0].name
      }
      if(this.referCondition.type == 'CUSTOMER_PARAM' && this.referCondition.title == '选择客户') {
        this.customerOptions = selection
        this.basicForm.customer = selection[0].id
        this.basicForm.customerName = selection[0].name
        this.basicForm.customerCode = selection[0].code
        if(this.basicForm.puDemandItemList.length !== 0) {
          this.basicForm.puDemandItemList.forEach(item => {
            item.demandCustomerName = this.basicForm.customerName
            item.demandCustomer = this.basicForm.customer
          })
        }
      }
      if(this.referCondition.type == 'CONTACTS_PARAM') {
        this.personOptions = selection
        this.basicForm.demandPersonal = selection[0].code
      }
      if(this.referCondition.type == 'DEPT_PARAM') {
        this.deptOptions = selection
        this.basicForm.demandDept = selection[0].id
      }
      // if(this.referCondition.type == 'DEPT_PARAM') {
      //   this.basicForm.puDemandItemList[this.tableIndex].businessDept = selection[0].code
      //   this.basicForm.puDemandItemList[this.tableIndex].businessDeptName = selection[0].name
      // }
      if(this.referCondition.title == '选择收货仓库') {
        this.basicForm.puDemandItemList[this.tableIndex].deliveryWarehouse = selection[0].id
        this.basicForm.puDemandItemList[this.tableIndex].deliveryWarehouseName = selection[0].name
        this.basicForm.puDemandItemList[this.tableIndex].deliveryAllocation = null
        this.basicForm.puDemandItemList[this.tableIndex].deliveryAllocationName = null
      }
      if(this.referCondition.title == '选择收货货位') {
        this.basicForm.puDemandItemList[this.tableIndex].deliveryAllocation = selection[0].id
        this.basicForm.puDemandItemList[this.tableIndex].deliveryAllocationName = selection[0].name
      }
      if(this.referCondition.title == '选择补单供应商') {
        this.basicForm.puDemandItemList[this.tableIndex].additionalSupplier = selection[0].code
        this.basicForm.puDemandItemList[this.tableIndex].additionalSupplierName = selection[0].name
      }
      if(this.referCondition.title == '选择收货地址') {
        this.basicForm.puDemandItemList[this.tableIndex].deliveryAddressName = selection[0].name
        this.basicForm.puDemandItemList[this.tableIndex].deliveryAddress = selection[0].code
        this.basicForm.puDemandItemList[this.tableIndex].contacts = selection[0].contactsName
        this.basicForm.puDemandItemList[this.tableIndex].contactsPhone = selection[0].contactsPhone
        this.basicForm.puDemandItemList[this.tableIndex].address = selection[0].address
      }
    },
    // 明细行选择物料编码带出数据
    chooseMaterial(index) {
      console.log("🚀 ~ file: add.vue:790 ~ chooseMaterial ~ index:", index)
      this.tableIndex = index
      // 传0只展示同步NC了的物料
      this.$refs.materialRefer.init(0)
    },
    selectMaterial(selection) {
      console.log('选中的物料', selection)
      // 选择新物料时先清空行内其他信息
      this.basicForm.puDemandItemList[this.tableIndex].reservedProportion = null
      this.basicForm.puDemandItemList[this.tableIndex].reservedPeriod = null
      this.basicForm.puDemandItemList[this.tableIndex].reservedQty = null
      this.basicForm.puDemandItemList[this.tableIndex].qty = null
      this.basicForm.puDemandItemList[this.tableIndex].deliveryDate = null
      this.basicForm.puDemandItemList[this.tableIndex].remark = null
      this.basicForm.puDemandItemList[this.tableIndex].resDemandQty = null
      this.basicForm.puDemandItemList[this.tableIndex].deliveryWarehouse = null
      this.basicForm.puDemandItemList[this.tableIndex].deliveryWarehouseName = null
      this.basicForm.puDemandItemList[this.tableIndex].deliveryAllocation = null
      this.basicForm.puDemandItemList[this.tableIndex].deliveryAllocationName = null
      this.basicForm.puDemandItemList[this.tableIndex].additionalSupplier = null
      this.basicForm.puDemandItemList[this.tableIndex].additionalSupplierName = null
      this.basicForm.puDemandItemList[this.tableIndex].periodUnit = null
      this.basicForm.puDemandItemList[this.tableIndex].deliveryAddressName = null
      this.basicForm.puDemandItemList[this.tableIndex].deliveryAddress = null
      this.basicForm.puDemandItemList[this.tableIndex].contacts = null
      this.basicForm.puDemandItemList[this.tableIndex].contactsPhone = null
      this.basicForm.puDemandItemList[this.tableIndex].address = null
      this.basicForm.puDemandItemList[this.tableIndex].priceType = 'order'
      this.basicForm.puDemandItemList[this.tableIndex].lastWarehouseName = null
      this.basicForm.puDemandItemList[this.tableIndex].lastWarehouse = null
      this.basicForm.puDemandItemList[this.tableIndex].lastAllocation = null
      this.basicForm.puDemandItemList[this.tableIndex].lastAllocationName = null
      // 通过选择物料查询采购员
      queryMan(selection[0].id).then(res => {
        if(res.code === 200 && res.rows.length !== 0) {
          this.basicForm.puDemandItemList[this.tableIndex].buyer = res.rows[0].buyer
          this.basicForm.puDemandItemList[this.tableIndex].buyerName = res.rows[0].buyerName
        }
      })
      this.basicForm.puDemandItemList[this.tableIndex].businessDept = selection[0].businessDepartment
      this.basicForm.puDemandItemList[this.tableIndex].businessDeptName = selection[0].businessDepartmentName
      this.basicForm.puDemandItemList[this.tableIndex].materialCode = selection[0].code
      this.basicForm.puDemandItemList[this.tableIndex].material = selection[0].id
      this.basicForm.puDemandItemList[this.tableIndex].materialName = selection[0].name
      this.basicForm.puDemandItemList[this.tableIndex].classifyId = selection[0].classifyId
      this.basicForm.puDemandItemList[this.tableIndex].materialClassifyOneName = selection[0].oneClass
      this.basicForm.puDemandItemList[this.tableIndex].materialClassifyTwoName = selection[0].twoClass
      this.basicForm.puDemandItemList[this.tableIndex].materialClassifyThreeName = selection[0].threeClass
      this.basicForm.puDemandItemList[this.tableIndex].materialClassifyFourName = selection[0].fourClass
      this.basicForm.puDemandItemList[this.tableIndex].specification = selection[0].specification
      this.basicForm.puDemandItemList[this.tableIndex].model = selection[0].model
      this.basicForm.puDemandItemList[this.tableIndex].unit = selection[0].unitId
      this.basicForm.puDemandItemList[this.tableIndex].unitName = selection[0].unitIdName
      this.basicForm.puDemandItemList[this.tableIndex].registrant = selection[0].registrant
      this.basicForm.puDemandItemList[this.tableIndex].manufacturerName = selection[0].manufacturerIdName
      this.basicForm.puDemandItemList[this.tableIndex].puPeriod = selection[0].deliveryPeriod
      this.basicForm.puDemandItemList[this.tableIndex].expiry = selection[0].usefulLife
      this.basicForm.puDemandItemList[this.tableIndex].expiryUnit = selection[0].expiryUnitIdName
      // this.basicForm.puDemandItemList[this.tableIndex].minPackage = selection[0].usefulLife
      this.basicForm.puDemandItemList[this.tableIndex].minPackage = selection[0].minPackQty
      this.basicForm.puDemandItemList[this.tableIndex].minOrderQty = selection[0].minOrderQty
      this.basicForm.puDemandItemList[this.tableIndex].minBatch = selection[0].minBatchQty
      this.basicForm.puDemandItemList[this.tableIndex].safeStock = selection[0].safeStock
      this.basicForm.puDemandItemList[this.tableIndex].purOrgName = selection[0].purchasingOrganizationName
      this.basicForm.puDemandItemList[this.tableIndex].puOrg = selection[0].purchasingOrganization
      // 物料存储条件和运输条件
      this.basicForm.puDemandItemList[this.tableIndex].transportationCondition = selection[0].transportationCondition
      this.basicForm.puDemandItemList[this.tableIndex].storageCondition = selection[0].storageCondition
      // 选中骨科耗材时候的物料，需求客户不必填
      
    },
    // 明细行选择业务部门参照带出业务部门数据
    chooseDept(index, type, isPage, title) {
      this.tableIndex = index
      this.referCondition.type = type
      this.referCondition.isPage = isPage
      this.referCondition.title = title
      this.$refs.refer.init(this.referCondition)
    },
    // 明细行选择业务部门参照带出业务部门数据
    choosehuoWei(index, type, isPage, title, stordocId) {
      this.tableIndex = index
      this.referCondition.type = type
      this.referCondition.isPage = isPage
      this.referCondition.title = title
      // 选择收货货位前先选择收货仓库
      if(stordocId) {
        this.referCondition.stordocId = stordocId
        this.$refs.refer.init(this.referCondition)
      } else {
        this.$modal.msgWarning("请先选择收货仓库");
      }
    },
    // 明细行清空收货仓库，货位，收货地址档案等
    clearHang(index, title) {
      if (title == '选择收货仓库') {
        this.basicForm.puDemandItemList[index].deliveryWarehouseName = null
        this.basicForm.puDemandItemList[index].deliveryWarehouse = null
        this.basicForm.puDemandItemList[index].deliveryAllocationName = null
        this.basicForm.puDemandItemList[index].deliveryAllocation = null
      }
      if (title == '选择收货货位') {
        this.basicForm.puDemandItemList[index].deliveryAllocationName = null
        this.basicForm.puDemandItemList[index].deliveryAllocation = null
      }
      if (title == '选择收货地址') {
        this.basicForm.puDemandItemList[index].deliveryAddressName = null
        this.basicForm.puDemandItemList[index].deliveryAddress = null
        this.basicForm.puDemandItemList[index].contacts = null
        this.basicForm.puDemandItemList[index].contactsPhone = null
        this.basicForm.puDemandItemList[index].address = null
      }
      if (title == '选择补单供应商') {
        this.basicForm.puDemandItemList[index].additionalSupplierName = null
        this.basicForm.puDemandItemList[index].additionalSupplier = null
      }
    },
    // 清除需求客户将明细行内也清空
    cleanCustomer() {
      this.basicForm.customer = ''
      this.basicForm.customerName = ''
      if (this.basicForm.puDemandItemList.length !== 0) {
        this.basicForm.puDemandItemList.forEach(item => {
          item.demandCustomerName = ''
          item.demandCustomer = ''
        })
      }
    },
  }
}
</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>