heli-mes/mes-ui/mes-ui-admin-vue3/src/views/heli/purchaseorderno/from.vue

<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="500">
    <el-form
      ref="formRef"
      :model="formData"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-row>
        <el-col :span="24">
      <el-form-item prop="whId" label="入库仓库">
        <el-select
          v-model="formData.whId" placeholder="下拉选择" clearable class="!w-400px" @change="handleWh">
          <el-option v-for="dict in whList" :key="dict.id" :label="dict.whName" :value="dict.id" />
        </el-select>
      </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
      <el-form-item prop="rgId"   label="入库库区">
        <el-select
          v-model="formData.rgId" placeholder="下拉选择" style="width: 100%" @change="handleRg"
          >
          <el-option v-for="dict in rgList" :key="dict.id" :label="dict.rg_name" :value="dict.id" />
        </el-select>
      </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
      <el-form-item prop="pnId"  label="入库库位">
        <el-select
          v-model="formData.pnId" placeholder="下拉选择" style="width: 100%"
         >
          <el-option
            v-for="dict in pnList" :key="dict.id" :label="dict.pn_name"
            :value="dict.id" />
        </el-select>
      </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
      <el-form-item prop="storageAmount" label="入库数量">
        <el-input v-model="formData.storageAmount" disabled  />
      </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import * as RgApi from "@/api/heli/rg";
import * as PnApi from "@/api/heli/pn";
import * as WarehouseApi from "@/api/heli/warehouse";
import * as StorageApi from '@/api/heli/storage'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('采购入库') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  storageAmount: undefined,
  whId:undefined,
  rgId:undefined,
  pnId:undefined,
  purchaseOrderId:undefined,
  materialId:undefined,
  stockType:1,
})

const formRef = ref() // 表单 Ref
//仓库全数据
const whList = ref([])
//库区全数据
const rgList = ref([])
//库位全数据
const pnList = ref([])
const handleWh = async (wid) => {
  //-------------------库区全数据
  // 获得库区列表
  const dataRgList = await RgApi.getSimpList()
  const dataPnList = await PnApi.getSimpList()
  formData.value.rgId = '';
  formData.value.pnId = '';
  rgList.value = dataRgList.filter((rg) => rg.wh_id == wid)
  pnList.value = dataPnList.filter((pn) => pn.wh_id == wid)
}
const handleRg = async () => {
  //-------------------库位全数据
  const dataPnList = await PnApi.getSimpList()
  formData.value.pnId = '';
  console.log(formData.value.rgId)
  pnList.value= dataPnList.filter((pn) => pn.rg_id == formData.value.rgId)
  console.log(pnList.value)
  //-------------------
}
/** 打开弹窗 */
const open = async (id: number, purchaseOrderId: number,num:number,materialId:number) => {
  dialogVisible.value = true
  resetForm()
  formData.value.id=id;
  formData.value.purchaseOrderId=purchaseOrderId;
  formData.value.storageAmount=num;
  formData.value.materialId=materialId;
  console.log(formData.value)
  //- 获取仓库全数据
  whList.value = await WarehouseApi.getWarehouseSimpList()

  if (whList.value.length==1){
    formData.value.whId = whList.value[0].id;
    const dataRgList = await RgApi.getSimpList()
    rgList.value = dataRgList.filter((rg) => rg.wh_id == formData.value.whId)
    // 获得库区列表
    const dataPnList = await PnApi.getSimpList()

    pnList.value = dataPnList.filter((pn) => pn.wh_id == formData.value.whId)
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
      await StorageApi.procurementAndStorage(formData.value)
      message.success("采购入库成功");
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    storageAmount: undefined,
    whId:undefined,
    rgId:undefined,
    pnId:undefined,
    purchaseOrderId:undefined,
    materialId:undefined,
    stockType:1,
  }
  formRef.value?.resetFields()
}
</script>