cashier-web/src/views/inventory/consumables/components/add-haocai.vue

<template>
  <!-- 修改和增加 -->
  <el-dialog :title="dialogtitle" v-model="show" width="800px" @close="reset">
    <el-form :inline="false" ref="refform" :model="form" :rules="rules" class="demo-form-inline">
      <el-form-item label="耗材名称" prop="conName">
        <el-input v-model="form.conName" placeholder="请输入耗材名称"></el-input>
      </el-form-item>
      <el-form-item label="耗材分类" prop="consGroupId">
        <el-select v-model="form.consGroupId" placeholder="请选择耗材分类" style="width: 200px">
          <el-option
            v-for="option in consGroups"
            :key="option.conTypeId"
            :label="option.label"
            :value="option.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="耗材价格" prop="price">
        <el-input-number v-model="form.price" placeholder="请输入耗材价格"></el-input-number>
      </el-form-item>
      <el-form-item label="库存">
        <el-input-number v-model="form.stockNumber" placeholder="请输入库存值"></el-input-number>
      </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>

      <el-form-item label="单位" prop="conUnit">
        <el-input v-model="form.conUnit" placeholder="请输入单位"></el-input>
      </el-form-item>
      <el-form-item label="预警值">
        <el-input-number v-model="form.conWarning" placeholder="请输入耗材预警值"></el-input-number>
      </el-form-item>
      <el-form-item label="是否检测耗材">
        <el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="第二单位" prop="conUnitTwo">
        <el-input v-model="form.conUnitTwo" placeholder="请输入第二单位"></el-input>
      </el-form-item>
      <el-form-item label="第二单位转换数量" prop="conUnitTwoConvert">
        <el-input-number
          v-model="form.conUnitTwoConvert"
          placeholder="第二单位转换数量"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="默认入库单位" prop="defaultUnit">
        <el-input v-model="form.defaultUnit" placeholder="请输入默认入库单位"></el-input>
      </el-form-item>
      <el-form-item style="display: flex; justify-content: flex-end">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitForm('refform')">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>


<script setup>
import consApi from "@/api/product/cons";
import consGroupApi from "@/api/product/cons-group";
import { ElMessage } from "element-plus";
const consGroups = ref([]);
const rules = {
  conName: [{ required: true, message: "请输入耗材名称", trigger: "blur" }],
  consGroupId: [{ required: true, message: "请选择耗材类型", trigger: "change" }],
  price: [{ required: true, message: "请输入耗材价格", trigger: "blur" }],
  conWarning: [{ required: true, message: "请输入耗材预警值", trigger: "blur" }],
  conUnit: [{ required: true, message: "请输入耗材单位", trigger: "blur" }],
  conWarning: [
    {
      required: true,
      message: "请输入单位",
      trigger: "blur",
    },
  ],
};
function getConsGroups() {
  consGroupApi.getAllList().then((res) => {
    consGroups.value = res.map((v) => {
      return {
        ...v,
        label: v.name,
        value: v.id,
      };
    });
  });
}
getConsGroups();
const basicForm = {
  conName: "",
  consGroupId: "",
  conUnit: "",
  price: "",
  conWarning: "",
};
const forms = ref([{ ...basicForm }]);
const form = reactive({
  ...basicForm,
});

const show = ref(false);
let dialogtitle = ref("");
function open(item) {
  dialogtitle.value = item ? "编辑" : "新增";
  Object.assign(form, item);
  show.value = true;
}
function formsAdd(index) {
  forms.value.push({ ...basicForm });
}
function close() {
  show.value = false;
}

const refform = ref();
const refForms = ref([]);
function setFormRef(el, index) {
  if (el) {
    refForms.value[index] = el;
  }
}
function returnPromise(index, prosise) {
  return new Promise((resolve, reject) => {
    prosise
      .then((res) => {
        console.log(res);
        resolve({ sucees: true });
      })
      .catch((err) => {
        console.log(err);
        resolve({ sucees: false });
      });
  });
}

const emits = defineEmits(["refresh"]);
async function submitForm() {
  refform.value.validate(async (valid) => {
    if (valid) {
      const res = dialogtitle.value == "新增" ? await consApi.add(form) : await consApi.edit(form);
      ElMessage({ type: "success", message: dialogtitle.value + "成功" });
      emits("refresh");
      close();
    }
  });
}
async function submitForms() {
  let isAllPassForm = 0;
  for (let i in this.forms) {
    console.log(refForms.value[i]);
    const res = await returnPromise(i, refForms.value[i].validate());
    console.log(res);
    isAllPassForm += res.sucees ? 1 : 0;
  }
  //判断验证是否通过
  if (isAllPassForm === this.forms.length) {
    await consApi.add(this.forms);
    ElMessage({ type: "success", message: "添加成功" });
    // for(let i of this.forms){
    //   const res=await posttbConsInfo(i)
    //   this.$message({ type: "success", message: "添加成功" });
    // }
    this.dialogshow = false;
    this.resetRuleForms();
    this.ruleFormLoading = false;
    this.getTableData();
  }
}
function reset() {
  form.value = { ...basicForm };
}
defineExpose({
  open,
  close,
});
</script>