src/views/inventoryManagement/stockManagement/Subtract.vue
@@ -1,64 +1,82 @@
<template>
  <div>
    <el-dialog
        v-model="isShow"
        title="领用"
        width="800"
        @close="closeModal"
      v-model="isShow"
      :title="TEXT.title"
      width="800"
      @close="closeModal"
    >
      <el-form label-width="140px" :model="formState" label-position="top" ref="formRef">
        <el-form-item
            label="产品名称"
            prop="productModelId"
            :rules="[
                {
                required: true,
                message: '请选择产品',
                trigger: 'change',
              }
            ]"
          :label="TEXT.productName"
          prop="productModelId"
          :rules="[
            {
              required: true,
              message: TEXT.selectProduct,
              trigger: 'change',
            },
          ]"
        >
          <el-button type="primary" @click="showProductSelectDialog = true" disabled>
            {{ formState.productName ? formState.productName : '选择产品' }}
            {{ formState.productName ? formState.productName : TEXT.selectProduct }}
          </el-button>
        </el-form-item>
        <el-form-item
            label="规格"
            prop="productModelName"
        >
          <el-input v-model="formState.model"  disabled />
        <el-form-item :label="TEXT.specification" prop="productModelName">
          <el-input v-model="formState.model" disabled />
        </el-form-item>
        <el-form-item :label="TEXT.unit" prop="unit">
          <el-input v-model="formState.unit" disabled />
        </el-form-item>
        <el-form-item :label="TEXT.quantity" prop="qualitity">
          <el-input-number
            v-model="formState.qualitity"
            :step="1"
            :min="1"
            :max="maxQuality"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item
            label="单位"
            prop="unit"
          :label="TEXT.inboundTime"
          prop="inboundTime"
          :rules="[
            {
              required: true,
              message: TEXT.selectInboundTime,
              trigger: 'change',
            },
          ]"
        >
          <el-input v-model="formState.unit"  disabled />
          <el-date-picker
            v-model="formState.inboundTime"
            type="datetime"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            :placeholder="TEXT.selectInboundTime"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item
            label="数量"
            prop="qualitity"
        >
          <el-input-number v-model="formState.qualitity" :step="1" :min="1" :max="maxQuality" style="width: 100%" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
        <el-form-item :label="TEXT.remark" prop="remark">
          <el-input v-model="formState.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <!-- 产品选择弹窗 -->
      <ProductSelectDialog
          v-model="showProductSelectDialog"
          @confirm="handleProductSelect"
          single
        v-model="showProductSelectDialog"
        @confirm="handleProductSelect"
        single
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确认</el-button>
          <el-button @click="closeModal">取消</el-button>
          <el-button type="primary" @click="handleSubmit">{{ TEXT.confirm }}</el-button>
          <el-button @click="closeModal">{{ TEXT.cancel }}</el-button>
        </div>
      </template>
    </el-dialog>
@@ -66,10 +84,26 @@
</template>
<script setup>
import {ref, computed, getCurrentInstance} from "vue";
import { computed, getCurrentInstance, onMounted, ref } from "vue";
import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
import {subtractStockInventory} from "@/api/inventoryManagement/stockInventory.js";
import {subtractStockUnInventory} from "@/api/inventoryManagement/stockUninventory.js";
import { subtractStockInventory } from "@/api/inventoryManagement/stockInventory.js";
import { subtractStockUnInventory } from "@/api/inventoryManagement/stockUninventory.js";
const TEXT = {
  title: "\u9886\u7528",
  productName: "\u4ea7\u54c1\u540d\u79f0",
  selectProduct: "\u8bf7\u9009\u62e9\u4ea7\u54c1",
  specification: "\u89c4\u683c",
  unit: "\u5355\u4f4d",
  quantity: "\u6570\u91cf",
  inboundTime: "\u5165\u5e93\u65f6\u95f4",
  selectInboundTime: "\u8bf7\u9009\u62e9\u5165\u5e93\u65f6\u95f4",
  remark: "\u5907\u6ce8",
  confirm: "\u786e\u8ba4",
  cancel: "\u53d6\u6d88",
  submitSuccess: "\u63d0\u4ea4\u6210\u529f",
  selectSpec: "\u8bf7\u9009\u62e9\u89c4\u683c",
};
const props = defineProps({
  visible: {
@@ -83,29 +117,22 @@
  type: {
    type: String,
    required: true,
    default: 'qualified',
    default: "qualified",
  },
});
const emit = defineEmits(['update:visible', 'completed']);
const emit = defineEmits(["update:visible", "completed"]);
onMounted(() => {
  initFormData()
})
const getCurrentDateTime = () => {
  const now = new Date();
  const pad = (value) => String(value).padStart(2, "0");
  return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
};
const maxQuality = computed(() => {
  return props.record.unLockedQuantity ? props.record.unLockedQuantity :  0;
})
  return props.record.unLockedQuantity ? props.record.unLockedQuantity : 0;
});
const initFormData = () => {
  if (props.record) {
    formState.value = {
      ...props.record,
    }
  }
}
// 响应式数据(替代选项式的 data)
const formState = ref({
  productId: undefined,
  productModelId: undefined,
@@ -113,7 +140,8 @@
  model: "",
  unit: "",
  qualitity: 0,
  remark: '',
  inboundTime: getCurrentDateTime(),
  remark: "",
});
const isShow = computed({
@@ -121,75 +149,80 @@
    return props.visible;
  },
  set(val) {
    emit('update:visible', val);
    emit("update:visible", val);
  },
});
const showProductSelectDialog = ref(false);
const { proxy } = getCurrentInstance();
let { proxy } = getCurrentInstance()
const initFormData = () => {
  if (props.record) {
    formState.value = {
      ...props.record,
      inboundTime: props.record.inboundTime || getCurrentDateTime(),
    };
  }
};
onMounted(() => {
  initFormData();
});
const closeModal = () => {
  // 重置表单数据
  formState.value = {
    productId: undefined,
    productModelId: undefined,
    productName: "",
    productModelName: "",
    description: '',
    description: "",
    inboundTime: getCurrentDateTime(),
  };
  isShow.value = false;
};
// 产品选择处理
const handleProductSelect = async (products) => {
  if (products && products.length > 0) {
    const product = products[0];
    console.log(product)
    formState.value.productId = product.productId;
    formState.value.productName = product.productName;
    formState.value.productModelName = product.model;
    formState.value.productModelId = product.id;
    formState.value.unit = product.unit;
    showProductSelectDialog.value = false;
    // 触发表单验证更新
    proxy.$refs["formRef"]?.validateField('productModelId');
    proxy.$refs["formRef"]?.validateField("productModelId");
  }
};
const handleSubmit = () => {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      // 验证是否选择了产品和规格
      if (!formState.value.productModelId) {
        proxy.$modal.msgError("请选择产品");
        return;
      }
      if (!formState.value.productModelId) {
        proxy.$modal.msgError("请选择规格");
        return;
      }
      if (props.type === 'qualified') {
        subtractStockInventory(formState.value).then(res => {
          // 关闭模态框
          isShow.value = false;
          // 告知父组件已完成
          emit('completed');
          proxy.$modal.msgSuccess("提交成功");
        })
      } else {
        subtractStockUnInventory(formState.value).then(res => {
          // 关闭模态框
          isShow.value = false;
          // 告知父组件已完成
          emit('completed');
          proxy.$modal.msgSuccess("提交成功");
        })
      }
  proxy.$refs["formRef"].validate((valid) => {
    if (!valid) {
      return;
    }
  })
};
    if (!formState.value.productModelId) {
      proxy.$modal.msgError(TEXT.selectProduct);
      return;
    }
    if (!formState.value.productModelId) {
      proxy.$modal.msgError(TEXT.selectSpec);
      return;
    }
    if (!formState.value.inboundTime) {
      proxy.$modal.msgError(TEXT.selectInboundTime);
      return;
    }
    const submitApi =
      props.type === "qualified" ? subtractStockInventory : subtractStockUnInventory;
    submitApi(formState.value).then(() => {
      isShow.value = false;
      emit("completed");
      proxy.$modal.msgSuccess(TEXT.submitSuccess);
    });
  });
};
defineExpose({
  closeModal,