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

<template>
  <div style="width: 100%; padding: 0px 15px">
    <byForm
      :formConfig="formConfig"
      :formOption="formOption"
      v-model="formData.data"
      :rules="rules"
      ref="formDom"
    >
      <template #details>
        <div style="width: 100%">
          <el-button
            type="primary"
            @click="openProduct = true"
            style="margin-bottom: 10px"
          >
            添加物品
          </el-button>
          <el-table :data="formData.data.salesReturnDetailList">
            <el-table-column
              prop="goodType"
              label="货品类型"
              :formatter="(row) => (row.goodType == 1 ? '产品' : '物料')"
            />
            <el-table-column prop="productCode" label="货品编码" />
            <el-table-column prop="productName" label="货品名称" />
            <el-table-column prop="productSpec" label="规格型号" />
            <el-table-column
              prop="productUnit"
              label="单位"
              :formatter="
                (row) =>
                  row.goodType == 1
                    ? dictValueLabel(row.productUnit, productUnit)
                    : dictValueLabel(row.productUnit, productUnitOne)
              "
            />
            <el-table-column prop="count" label="退货数量" min-width="150">
              <template #default="{ row, $index }">
                <el-form-item
                  :prop="'salesReturnDetailList.' + $index + '.count'"
                  :rules="rules.count"
                  :inline-message="true"
                >
                  <el-input-number
                    onmousewheel="return false;"
                    v-model="row.count"
                    :precision="4"
                    :controls="false"
                    :min="0"
                  />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="退货原因" min-width="150">
              <template #default="{ row, $index }">
                <el-form-item
                  :prop="'salesReturnDetailList.' + $index + '.remark'"
                  :rules="rules.remark"
                  :inline-message="true"
                >
                  <el-input
                    v-model="row.remark"
                    placeholder="请输入"
                    type="textarea"
                  />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="zip" label="操作" width="100">
              <template #default="{ $index }">
                <el-button type="primary" link @click="handleRemove($index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </byForm>
    <el-dialog
      v-if="openProduct"
      v-model="openProduct"
      title="选择货品"
      width="70%"
      append-to-body
    >
      <SelectGoods
        :selectList="acquireSelectList()"
        @cancel="openProduct = false"
        @pushGoods="pushGoods"
      ></SelectGoods>
    </el-dialog>
  </div>
</template>

<script setup>
import byForm from "@/components/byForm/index";
import { ElMessage } from "element-plus";
import SelectGoods from "@/components/product/SelectGoods";
import useUserStore from "@/store/modules/user";
const { proxy } = getCurrentInstance();
const route = useRoute();

let formData = reactive({
  data: {
    supplyId: "",
    salesReturnDetailList: [],
    returnName: "",
  },
});

let rules = ref({
  supplyId: [{ required: true, message: "请选择供应商", trigger: "change" }],
  count: [{ required: true, message: "请输入退货数量", trigger: "blur" }],
  remark: [{ required: true, message: "请输入退货原因", trigger: "blur" }],
});
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
});
const formConfig = computed(() => {
  return [
    {
      type: "input",
      prop: "returnDept",
      label: "申请部门",
      itemWidth: 25,
      disabled: true,
      style: {
        "margin-right": "10px",
      },
    },
    {
      type: "input",
      prop: "returnName",
      label: "申请人",
      itemWidth: 25,
      disabled: true,
      style: {
        "margin-right": "10px",
      },
    },
    {
      type: "date",
      prop: "purchaseTime",
      label: "申请时间",
      itemWidth: 25,
      disabled: true,
      style: {
        "margin-right": "10px",
      },
    },
    {
      type: "select",
      prop: "supplyId",
      label: "供应商",
      isLoad: {
        url: "/supplierInfo/page",
        req: {
          pageNum: 1,
          pageSize: 9999,
        },
        labelKey: "name",
        labelVal: "id",
        method: "post",
        resUrl: "rows",
      },
    },
    {
      type: "slot",
      slotName: "details",
      label: "退货明细",
    },
  ];
});
const formDom = ref(null);
const handleSubmit = async () => {
  const vaild = await formDom.value.handleSubmit(() => {}); //拿到内部表单是否验证通过
  if (vaild) {
    if (formData.data.salesReturnDetailList.length > 0) {
      const list = formData.data.salesReturnDetailList;
      for (let i = 0; i < list.length; i++) {
        const e = list[i];
        if (e.count == 0) {
          ElMessage({
            message: "退货数量不能为0！",
            type: "info",
          });
          return false;
        }
      }
      return true;
    }
    ElMessage({
      message: "请添加退货明细！",
      type: "info",
    });
    return false;
  }
};
let openProduct = ref(false);
const handleRemove = (index) => {
  formData.data.salesReturnDetailList.splice(index, 1);
  return ElMessage({
    message: "删除成功！",
    type: "success",
  });
};
const pushGoods = (goods) => {
  if (goods && goods.length > 0) {
    let afterFiltering = [];
    if (
      formData.data.salesReturnDetailList &&
      formData.data.salesReturnDetailList.length > 0
    ) {
      afterFiltering = goods.filter((item) => {
        let data = formData.data.salesReturnDetailList.filter(
          (itemProduct) => itemProduct.bussinessId === item.id
        );
        if (data && data.length > 0) {
          return false;
        }
        return true;
      });
    } else {
      afterFiltering = goods;
    }
    const arr = afterFiltering.map((x) => ({
      goodType: x.goodType,
      productCode: x.code,
      productName: x.name,
      productSpec: x.spec,
      productUnit: x.unit,
      count: 0,
      bussinessId: x.id,
      remark: "",
    }));
    formData.data.salesReturnDetailList =
      formData.data.salesReturnDetailList.concat(arr);
    openProduct.value = false;
    return ElMessage({
      message: "添加成功！",
      type: "success",
    });
  } else {
    ElMessage("请选择至少一件物品");
  }
};

// 接收父组件的传值
const props = defineProps({
  queryData: String,
});

// 获取用户信息并赋默认值
const userInfo = useUserStore().user;
onMounted(() => {
  if (!route.query.processType) {
    formData.data.purchaseTime = proxy.parseTime(new Date());
    formData.data.returnDept = userInfo.dept.deptName;
    formData.data.returnName = userInfo.nickName;
  }
});

const judgeStatus = () => {
  if (route.query.processType == 20 || route.query.processType == 10) {
    return true;
  }
  if (props.queryData.recordList && props.queryData.recordList.length > 0) {
    let data = props.queryData.recordList.filter(
      (item) => item.status === 2 && item.nodeType !== 1
    );
    if (data && data.length > 0) {
      return true;
    }
  }
  return false;
};

watch(
  props.queryData,
  () => {
    formOption.disabled = judgeStatus();
    if (
      props.queryData &&
      ["10", "20", "30"].includes(route.query.processType)
    ) {
      for (const key in props.queryData) {
        formData.data[key] = props.queryData[key];
      }
    }
  },
  {
    deep: true,
  }
);

const productUnit = ref([]);
const productUnitOne = ref([]);
const getDict = () => {
  proxy.getDictOne(["unit", "material_unit"]).then((res) => {
    productUnit.value = res["unit"].map((x) => ({
      label: x.dictValue,
      value: x.dictKey,
    }));
    productUnitOne.value = res["material_unit"].map((x) => ({
      label: x.dictValue,
      value: x.dictKey,
    }));
  });
};
getDict();

const getFormData = () => {
  return proxy.deepClone(formData.data);
};
// 向父组件暴露
defineExpose({
  getFormData,
  handleSubmit,
});
const acquireSelectList = () => {
  let data = [];
  if (
    formData.data.salesReturnDetailList &&
    formData.data.salesReturnDetailList.length > 0
  ) {
    data = formData.data.salesReturnDetailList.map((item) => {
      return {
        id: item.bussinessId,
        name: item.productName,
      };
    });
  }
  return data;
};
</script>

<style lang="scss" scoped></style>