ss-crm-manage-web/src/views/Clue/Order/Comp/DialogDelivery.vue

<template>
  <el-dialog title="发货" v-model="show" width="700px">
    <el-form :model="form" ref="formRef" :rules="rules" label-width="85px">
      <el-row :gutter="20">
        <el-col :span="8" :offset="0">
          <el-form-item label="待发数量">
            <span class="font-bold">：{{ form.sendTotalNum }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="16" :offset="0">
          <el-form-item label="发货方式">
            <el-radio-group v-model="form.sendType" :disabled="autoAuditPurchase == 'false'">
              <el-radio :label="1"> 立即采购发货 </el-radio>
              <el-radio :label="2"> 使用库存发货 </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <template v-if="form.sendType == 1">
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="供应商" prop="supplier">
              <el-select v-model="form.supplier" placeholder="选择供应商" filterable>
                <el-option
                  v-for="item in supplierOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="采购数量" prop="purchaseNum">
              <el-input-number
                :min="form.sendTotalNum"
                v-model="form.purchaseNum"
                :controls="false"
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="采购单价" prop="unitPrice">
              <el-input-number
                :min="0"
                :controls="false"
                v-model="form.unitPrice"
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="存放仓库" prop="warehouseId">
              <el-select
                v-model="form.warehouseId"
                placeholder="请选择"
                filterable
                style="width: 100%"
              >
                <el-option
                  v-for="item in warehouseOptions"
                  :key="item.warehouseId"
                  :label="item.warehouseName"
                  :value="item.warehouseId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <template v-else>
        <el-table :data="inventoryList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="入库批次号" width="150px" />
          <el-table-column prop="warehouseName" label="存放仓库" width="120px" />
          <el-table-column prop="unitPrice" label="采购价" width="90px" />
          <el-table-column prop="remainNum" label="剩余库存" width="90px" />
          <el-table-column label="发货数量">
            <template #default="{ row }">
              <el-input-number
                v-model="row.sendNum"
                size="small"
                :min="1"
                :max="row.remainNum"
                :controls="false"
              />
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-form-item label="备注">
        <Editor v-model:modelValue="form.remark" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button @click="show = false">取 消</el-button>
        <el-button :disabled="formLoading" type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup name="DialogDelivery">
import { getSimpleWarehouseList } from '@/api/mall/warehouse'
import { createDelivery } from '@/api/clue/delivery'
import { getConfigList } from '@/api/system/set'
import { getDictOptions } from '@/utils/dict'

const message = useMessage() // 消息弹窗

const warehouseOptions = ref([])
const supplierOptions = getDictOptions('erp_supplier')
function getOptions() {
  getSimpleWarehouseList().then((data) => {
    warehouseOptions.value = data
  })
}

const show = ref(false)
function open(id, signNum) {
  show.value = true
  resetForm(id, signNum)
}
defineExpose({
  open
})

const form = ref({})
const rules = ref({
  supplier: { required: true, message: '供应商不可为空', trigger: 'change' },
  warehouseId: { required: true, message: '仓库不可为空', trigger: 'change' },
  purchaseNum: { required: true, message: '采购数量不可为空', trigger: 'change,blur' },
  unitPrice: { required: true, message: '采购单价不可为空', trigger: 'change,blur' },
  warehouseId: { required: true, message: '仓库不可为空', trigger: 'change' }
})
function resetForm(id, num) {
  form.value = {
    sendType: 2,
    sendTotalNum: num,
    signProductId: id,
    warehouseId: undefined,
    supplier: undefined,
    purchaseNum: num,
    unitPrice: undefined,
    remark: undefined
  }
}

const emit = defineEmits(['success'])
const formLoading = ref(false)
const formRef = ref()
async function onSubmit() {
  // 校验表单
  if (!formRef.value) return

  if (form.value.sendType == 1) {
    const valid = await formRef.value.validate()
    if (!valid) return
  } else {
    if (!deliveryArr.value.length) {
      message.info('请选择库存发货！')
      return
    } else {
      const deliveryCount = deliveryArr.value.reduce((pre, cur) => pre + cur.sendNum, 0)
      if (deliveryCount < form.value.sendTotalNum) {
        message.info('所选发货库存少于待发货数量，请重新选择后再发货！')
        return
      } else if (deliveryCount > form.value.sendTotalNum) {
        message.info('所选发货库存多于待发货数量，请重新选择后再发货！')
        return
      }
    }
  }

  // 提交请求
  formLoading.value = true
  try {
    await createDelivery(form.value)
    message.success('发货成功！')
    show.value = false
    emit('success')
  } finally {
    formLoading.value = false
  }
}

const inventoryList = ref([
  { id: 123, warehouseName: '自营仓', unitPrice: 120, remainNum: 5 },
  { id: 234, warehouseName: '自营仓', unitPrice: 100, remainNum: 5 },
  { id: 345, warehouseName: '供应商仓', unitPrice: 110, remainNum: 999 }
])

const deliveryArr = ref([])
function handleSelectionChange(val) {
  deliveryArr.value = val
}

const autoAuditPurchase = ref('false')
onMounted(() => {
  getOptions()
  getConfigList({ module: 3 }).then((data) => {
    // 获取所有配置项
    autoAuditPurchase.value = data.find(
      (it) => it.configKey == 'purchaseAuditAutoCompleteConfig'
    ).configValue
  })
})
</script>

<style lang="scss" scoped></style>