MTP2.0_WEB/src/views/search/inventory/components/add/index.vue

<template>
  <!-- 出入库登记-->
  <a-modal class="commonModal add-spot-contract"
           :title="`出入库登记（生产${inOrOut()}）`"
           v-model:visible="visible"
           centered
           :maskClosable="false"
           @cancel="closeAction"
           width="890px">
    <template #footer>
      <a-button key="submit"
                class="cancelBtn"
                @click="closeAction">取消</a-button>
      <a-button key="submit"
                type="primary"
                :loading="loading"
                @click="submit(2)">{{inOrOut()}}登记</a-button>
    </template>
    <a-form class="inlineForm"
            ref="formRef"
            :model="formState"
            :rules="rules">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="出入库类型"
                       name="InOutType">
            <a-select class="inlineFormSelect"
                      style="width: 200px"
                      v-model:value="formState.InOutType"
                      placeholder="请选择出入库类型">
              <a-select-option v-for="item in warehouseType"
                               :key="item.key"
                               :value="item.key">
                {{item.name}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="现货品种"
                       name="DeliveryGoodsID">
            <a-select class="inlineFormSelect"
                      style="width: 200px"
                      @change="deliveryGoodsChange"
                      :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                      v-model:value="formState.DeliveryGoodsID"
                      placeholder="请选择现货品种">
              <a-select-option v-for="item in deliveryGoodsList"
                               :key="item.deliverygoodsid"
                               :value="item.deliverygoodsid">
                {{item.deliverygoodsname}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="品类"
                       name="WRStandardID">
            <a-select class="inlineFormSelect"
                      style="width: 200px"
                      :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                      @change="WrStandardChange"
                      v-model:value="formState.WRStandardID"
                      placeholder="请选择品类">
              <a-select-option v-for="item in gmlist"
                               :key="item.wrstandardid"
                               :value="item.wrstandardid">
                {{item.wrstandardname}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="品牌"
                       name="SpotGoodsBrandID">
            <a-select class="inlineFormSelect"
                      style="width: 200px"
                      :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                      v-model:value="formState.SpotGoodsBrandID"
                      placeholder="请选择品牌">
              <a-select-option v-for="item in gblist"
                               :key="item.brandid"
                               :value="item.brandid">
                {{item.brandname}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item :label="`${inOrOut()}仓库`"
                       name="WarehouseInfo">
            <a-select class="inlineFormSelect"
                      style="width: 200px"
                      :placeholder="`请选择${inOrOut()}仓库`"
                      v-model:value="formState.WarehouseInfo">
              <a-select-option v-for="option in wareHouseList"
                               :key="option.autoid"
                               :value="option.autoid">
                {{option.warehousecode}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item :label="`${inOrOut()}数量`"
                       name="Qty">
            <a-input class="dialogInput"
                     style="width: 200px"
                     v-model:value="formState.Qty"
                     :placeholder="`请输入${inOrOut()}数量`" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, toRaw, watchEffect } from 'vue';
import { closeModal } from '@/common/setup/modal/index';
import { initData } from '@/common/methods';
import { Ermcp3ContractRsp } from '@/services/go/ermcp/spot-contract/interface';
import { handleDeliveryGoods, handleFormState, handleWarehouseList, handleWarehouseType } from './setup';
import { validateAction } from '@/common/setup/form';
import { FormState } from './interface';
import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { ermcpInOutStockApplyReq } from '@/services/proto/warehouse';
import { ERMCPAreaInOutStockApplyReq } from '@/services/proto/warehouse/interface';

export default defineComponent({
    name: 'add-spot-contract',
    components: {},
    props: {
        selectedRow: {
            type: Object as PropType<Ermcp3ContractRsp>,
            default: {},
        },
    },
    setup(props, context) {
        const { visible, cancel } = closeModal('inventory_current_add');
        const { rules, formState, formRef, initFormData } = handleFormState();
        const { warehouseType, inOrOut } = handleWarehouseType(formState);
        const { wareHouseList, getWarehouseList } = handleWarehouseList();
        const { deliveryGoodsList, gblist, gmlist, numberUnit, WrStandardChange, getDeliveryGoods, deliveryGoodsChange } = handleDeliveryGoods(formState);
        const loading = ref<boolean>(false);
        function submit() {
            validateAction<FormState>(formRef, formState).then((param) => {
                let reqParam: ERMCPAreaInOutStockApplyReq = {
                    InOutType: param.InOutType, // int32 出入库类型 - 1:采购入库 2:销售出库 3:生产入库 4:生产出库
                    WRStandardID: param.WRStandardID as number, // uint64 现货商品ID
                    // SpotGoodsModelID: param.S; // uint64 现货型号ID
                    SpotGoodsBrandID: param.SpotGoodsBrandID as number, // uint64 现货品牌ID
                    DeliveryGoodsID: param.DeliveryGoodsID as number, // uint64 现货品种ID
                    // SpotContractID: param.SpotContractID, // uint64 关联现货合同ID [1:采购入库 2:销售出库 ](1,2状态必填)
                    WarehouseInfo: param.WarehouseInfo as number, // uint64 现货仓库ID
                    Qty: Number(param.Qty), // double 数量
                    ApplyRemark: '', // string 申请备注
                };
                requestResultLoadingAndInfo(ermcpInOutStockApplyReq, reqParam, loading, ['出入库登记成功', '出入库登记失败:']).then(() => {
                    closeAction();
                    context.emit('refresh');
                });
            });
        }
        function closeAction() {
            Object.assign(formState, initFormData());
            cancel();
        }
        initData(() => {
            getWarehouseList();
            getDeliveryGoods();
        });
        return {
            visible,
            closeAction,
            submit,
            loading,
            maskClosableFlag: false,
            rules,
            formState,
            formRef,
            warehouseType,
            inOrOut,
            wareHouseList,
            deliveryGoodsList,
            gblist,
            gmlist,
            numberUnit,
            WrStandardChange,
            getDeliveryGoods,
            deliveryGoodsChange,
        };
    },
});
</script>

<style lang="less">
.add-spot-contract {
}
</style>;