byte-sailing-new/src/components/process/PurchaseRefund.vue

<template>
  <div style="width: 100%; padding: 0px 15px">
    <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
      <template #refundDetailList>
        <div style="width: 100%">
          <el-button type="primary" @click="clickAdd()">添加行</el-button>
          <el-table :data="formData.data.refundDetailList" style="width: 100%; margin-top: 16px">
            <el-table-column label="退货单号" width="220">
              <template #default="{ row, $index }">
                <div style="width: 100%">
                  <el-form-item :prop="'refundDetailList.' + $index + '.salesReturnId'" :rules="rules.salesReturnId" :inline-message="true">
                    <el-select v-model="row.salesReturnId" placeholder="请选择退货单号" style="width: 100%" @change="changePurchaseId(row)">
                      <el-option v-for="item in returnGoods" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="退货时间" width="160" />
            <el-table-column label="退款金额" width="180">
              <template #default="{ row, $index }">
                <div style="width: 100%">
                  <el-form-item :prop="'refundDetailList.' + $index + '.money'" :rules="rules.money" :inline-message="true">
                    <el-input-number
                      v-model="row.money"
                      placeholder="请输入金额"
                      style="width: 100%"
                      :precision="2"
                      :controls="false"
                      :min="0"
                      :disabled="row.id"
                      @change="changeMoney()" />
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="备注">
              <template #default="{ row, $index }">
                <div style="width: 100%">
                  <el-form-item :prop="'refundDetailList.' + $index + '.remark'" :rules="rules.remark" :inline-message="true">
                    <el-input v-model="row.remark" placeholder="请输入款项说明" style="width: 100%" />
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
              <template #default="{ row, $index }">
                <el-button type="primary" link @click="handleRemove($index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <br />
        </div>
      </template>
    </byForm>
  </div>
</template>

<script setup>
import byForm from "@/components/byForm/index";
import useUserStore from "@/store/modules/user";
import moment from "moment";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const supplierList = ref([]);
const returnGoods = ref([]);
let formData = reactive({
  data: {
    supplyId: "",
    deptName: useUserStore().user.dept.deptName,
    refundName: useUserStore().user.dept.userName,
    amount: "",
    remark: "",
    refundTime: moment().format("yyyy-MM-DD HH:mm:ss"),
    refundDetailList: [],
  },
});
const submit = ref(null);
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});
const formConfig = computed(() => {
  return [
    {
      label: "基础信息",
    },
    {
      type: "input",
      prop: "deptName",
      label: "申请部门",
      required: true,
      itemType: "text",
      disabled: true,
      itemWidth: 25,
    },
    {
      type: "input",
      prop: "refundName",
      label: "申请人",
      required: true,
      itemType: "text",
      disabled: true,
      itemWidth: 25,
    },
    {
      type: "input",
      prop: "refundTime",
      label: "申请时间",
      required: true,
      itemType: "text",
      disabled: true,
      itemWidth: 25,
    },
    {
      type: "select",
      label: "供应商",
      prop: "supplyId",
      data: supplierList.value,
      fn: (val) => {
        changeSupply(val);
      },
    },
    {
      type: "input",
      prop: "remark",
      label: "退款原因",
      itemType: "textarea",
    },
    {
      type: "slot",
      prop: "refundDetailList",
      slotName: "refundDetailList",
      label: "关联退货",
    },
    {
      type: "input",
      prop: "amount",
      label: "应退款金额",
      required: true,
      itemType: "text",
      disabled: true,
    },
  ];
});
let rules = ref({
  supplyId: [{ required: true, message: "请选择供应商", trigger: "change" }],
  salesReturnId: [{ required: true, message: "请选择退货单号", trigger: "change" }],
  money: [{ required: true, message: "请输入退款金额", trigger: "blur" }],
});
const getDict = () => {
  proxy.post("/supplierInfo/page", { pageNum: 1, pageSize: 999 }).then((res) => {
    if (res.rows && res.rows.length > 0) {
      supplierList.value = res.rows.map((item) => {
        return {
          label: item.name,
          value: item.id,
        };
      });
    }
  });
};
getDict();
const changeSupply = (val) => {
  if (val) {
    proxy.get("/salesReturn/getBySupplyId", { supplyId: val }).then((res) => {
      if (res.data && res.data.length > 0) {
        returnGoods.value = res.data.map((item) => {
          return {
            value: item.id,
            label: item.code,
            createTime: item.createTime,
          };
        });
      } else {
        returnGoods.value = [];
      }
    });
  } else {
    returnGoods.value = [];
  }
};
const clickAdd = () => {
  if (formData.data.refundDetailList && formData.data.refundDetailList.length > 0) {
    formData.data.refundDetailList.push({ salesReturnId: "", money: undefined, remark: "" });
  } else {
    formData.data.refundDetailList = [{ salesReturnId: "", money: undefined, remark: "" }];
  }
};
const handleRemove = (index) => {
  formData.data.refundDetailList.splice(index, 1);
};
const changeMoney = () => {
  let money = 0;
  for (let i = 0; i < formData.data.refundDetailList.length; i++) {
    if (formData.data.refundDetailList[i].money) {
      money = parseFloat(Number(money) + Number(formData.data.refundDetailList[i].money)).toFixed(2);
    }
  }
  formData.data.amount = money;
};
const handleSubmit = async () => {
  let status = await submit.value.handleSubmit(() => {});
  if (status) {
    if (formData.data.refundDetailList && formData.data.refundDetailList.length > 0) {
      return true;
    } else {
      ElMessage("请添加至少一条退货信息");
    }
    return false;
  }
  return status;
};
// 向父组件暴露
defineExpose({
  submitData: formData.data,
  handleSubmit,
});
</script>

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