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

<template>
  <!-- 修改和增加 -->
  <el-dialog :title="dialogtitle" v-model="show" width="85%">
    <div v-if="dialogtitle != '编辑'">
      <div v-for="(item, index) in forms" :key="index">
        <el-form
          :inline="true"
          :ref="(el) => setFormRef(el, index)"
          :model="item"
          :rules="rules"
          class="demo-form-inline"
        >
          <el-form-item label=" ">
            <el-icon color="red" @click="formsReduce(index)"><Remove /></el-icon>
          </el-form-item>
          <el-form-item label="耗材名称" prop="conName">
            <el-input v-model="item.conName" placeholder="请输入耗材信息名称"></el-input>
          </el-form-item>
          <el-form-item label="耗材类型" prop="conTypeId">
            <el-select v-model="item.conTypeId" placeholder="请选择耗材类型" style="width: 200px">
              <el-option
                v-for="option in consGroups"
                :key="option.conTypeId"
                :label="option.conTypeName"
                :value="option.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="单位" prop="conUnit">
            <el-input v-model="item.conUnit" placeholder="请输入单位"></el-input>
          </el-form-item>

          <el-form-item label="耗材价格">
            <el-input v-model="item.price" placeholder="请输入耗材价格"></el-input>
          </el-form-item>
          <el-form-item label="预警值">
            <el-input v-model="item.conWarning" placeholder="请输入耗材预警值"></el-input>
          </el-form-item>

          <el-form-item label=" ">
            <el-icon color="green" @click="formsAdd(index)"><CirclePlus /></el-icon>
          </el-form-item>
        </el-form>
      </div>

      <div style="display: flex; justify-content: flex-end">
        <el-button @click="dialogshow = false">取 消</el-button>
        <el-button type="primary" @click="submitForms()">确 定</el-button>
      </div>
    </div>
    <el-form
      v-else
      :inline="true"
      ref="refform"
      :model="form"
      :rules="rules"
      class="demo-form-inline"
    >
      {{ dialogtitle }}

      <el-form-item label="耗材信息名称" prop="conName">
        <el-input v-model="form.conName" placeholder="请输入耗材信息名称"></el-input>
      </el-form-item>

      <el-form-item label="耗材价格">
        <el-input v-model="form.price" placeholder="请输入耗材价格"></el-input>
      </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 v-model="form.conWarning" placeholder="请输入耗材预警值"></el-input>
      </el-form-item>
      <!-- <el-form-item label="状态" v-if="dialogtitle == '编辑'">
            <el-switch v-model="form.status" active-value="1" inactive-value="0"></el-switch>
          </el-form-item> -->
      <!-- <el-form-item label="单位耗材值" prop="surplusStock">
          <el-input v-model="form.surplusStock" placeholder="请输入单位耗材值"></el-input>
        </el-form-item> -->
      <el-form-item style="display: flex; justify-content: flex-end">
        <el-button @click="dialogshow = false">取 消</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 = {
  conCode: [{ required: true, message: "请输入耗材信息代码", trigger: "blur" }],
  conName: [{ required: true, message: "请输入耗材信息名称", trigger: "blur" }],
  conTypeId: [{ required: true, message: "请选择耗材类型", trigger: "change" }],
  price: [{ required: true, message: "请输入耗材价格", trigger: "blur" }],
  conWarning: [{ required: true, message: "请输入耗材预警值", trigger: "blur" }],
  conTypeId: [{ required: true, message: "请输入耗材类型id", 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 = {
  conCode: "",
  conName: "",
  conTypeId: "",
  price: "0",
  conNames: "",
  conUnit: "",
  conWarning: "999",
  shopId: localStorage.getItem("shopId"),
  status: "",
};
const forms = ref([{ ...basicForm }]);
const form = reactive({
  ...basicForm,
});

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

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 });
      });
  });
}
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();
  }
}
defineExpose({
  open,
  close,
});
</script>