sd-new-vue/src/views/production/operation/overclaim/index.vue

<template>
  <el-card class="box-card">
    <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
      <template #orderId>
        <div style="width: 100%">
          <el-select-v2 v-model="formData.data.orderId" :options="productionOrder" placeholder="请选择订单号" @change="changeOrder()" style="width: 100%" filterable />
        </div>
      </template>
      <template #productionExceedReceiveSkuList>
        <div style="width: 100%">
          <el-table :data="formData.data.productionExceedReceiveSkuList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
            <el-table-column label="SKU品号" prop="code" width="160" />
            <el-table-column label="SKU品名" prop="name" min-width="220" />
            <el-table-column label="BOM品号" prop="bomCode" width="160" />
            <el-table-column label="订单数量" prop="orderQuantity" width="120" />
            <el-table-column label="超领数量" width="160">
              <template #default="{ row, $index }">
                <el-form-item :prop="'productionExceedReceiveSkuList.' + $index + '.quantity'" :rules="rules.quantity" :inline-message="true" style="width: 100%">
                  <el-input-number
                    onmousewheel="return false;"
                    v-model="row.quantity"
                    placeholder="超领数量"
                    style="width: 100%"
                    :controls="false"
                    :min="0"
                    :precision="0"
                    :max="row.orderQuantity" />
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </byForm>
    <div style="text-align: center; margin: 10px">
      <el-button @click="clickCancel()" size="large">重 置</el-button>
      <el-button type="primary" @click="submitForm()" size="large" v-preReClick>提 交</el-button>
    </div>
  </el-card>
</template>

<script setup>
import byForm from "/src/components/byForm/index";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const productionOrder = ref([]);
const typeList = ref([
  {
    dictKey: 1,
    dictValue: "制作损坏",
  },
  {
    dictKey: 2,
    dictValue: "裸垫质量不良",
  },
]);
const getDemandData = () => {
  proxy.post("/productionOrder/page", { pageNum: 1, pageSize: 9999, status: "30" }).then((res) => {
    if (res.rows && res.rows.length > 0) {
      productionOrder.value = productionOrder.value.concat(
        res.rows.map((item) => {
          if (item.wlnCode) {
            return {
              value: item.orderId,
              label: item.code + " （" + item.wlnCode + "）",
            };
          } else {
            return {
              value: item.orderId,
              label: item.code,
            };
          }
        })
      );
    }
  });
};
getDemandData();
const submit = ref(null);
const formOption = reactive({
  inline: true,
  labelWidth: "120px",
  itemWidth: 100,
  rules: [],
  labelPosition: "right",
});
const formData = reactive({
  data: {
    orderId: "",
    type: "",
    productionExceedReceiveSkuList: [],
  },
});
const formConfig = computed(() => {
  return [
    {
      type: "slot",
      label: "订单号",
      slotName: "orderId",
      prop: "orderId",
      itemWidth: 51,
    },
    {
      type: "select",
      label: "超领原因",
      prop: "type",
      data: typeList.value,
      itemWidth: 51,
    },
    {
      type: "input",
      label: "责任人",
      prop: "responsible",
      itemWidth: 51,
    },
    {
      type: "slot",
      slotName: "productionExceedReceiveSkuList",
      label: "订单商品",
    },
  ];
});
const rules = ref({
  orderId: [{ required: true, message: "请选择订单号", trigger: "change" }],
  type: [{ required: true, message: "请选择超领原因", trigger: "change" }],
  quantity: [{ required: true, message: "请输入超领数量", trigger: "blur" }],
  responsible: [{ required: true, message: "请输入责任人", trigger: "blur" }],
});
const submitForm = () => {
  submit.value.handleSubmit(() => {
    if (formData.data.productionExceedReceiveSkuList && formData.data.productionExceedReceiveSkuList.length > 0) {
      proxy.post("/productionExceedReceive/exceedReceive", formData.data).then(() => {
        ElMessage({ message: "操作完成", type: "success" });
        clickCancel();
      });
    } else {
      return ElMessage("请添加订单商品");
    }
  });
};
const clickCancel = () => {
  formData.data = {
    productionExceedReceiveSkuList: [],
  };
  submit.value.resetFields();
};
const changeOrder = () => {
  if (formData.data.orderId) {
    proxy.post("/productionExceedReceive/getOrderSkuList", { id: formData.data.orderId }).then((res) => {
      if (res && res.length > 0) {
        formData.data.productionExceedReceiveSkuList = res.map((item) => {
          return {
            bomSpecId: item.bomSpecId,
            name: item.name,
            code: item.code,
            bomCode: item.bomCode,
            quantity: undefined,
            orderQuantity: item.quantity,
            id: item.id,
          };
        });
      } else {
        formData.data.productionExceedReceiveSkuList = [];
      }
    });
  } else {
    formData.data.productionExceedReceiveSkuList = [];
  }
};
</script>

<style lang="scss" scoped>
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
</style>