erp_wdly/src/views/WDLY/salesMange/jdReGoodsInspection/CheckProduct.vue

<template>

  <div>

    <el-dialog title="京东退货质检" v-model="visible" width="1200px" destroy-on-close :loading="loading">

      <el-button type="primary" @click="handleOpen" style="margin-bottom: 10px">
        选择产品
      </el-button>

      <!--      <el-button type="primary" @click="openExcel" style="margin-bottom: 10px">-->
      <!--        导入Excel-->
      <!--      </el-button>-->

      <el-table :data="list">
        <el-table-column prop="productCustomCode" label="物品编码"/>
        <el-table-column prop="productName" label="物品名称"/>
        <el-table-column prop="productSpec" label="规格"/>
        <el-table-column prop="productUnit" label="单位"/>
        <el-table-column prop="quantity" label="待质检数量"/>

        <el-table-column label="良品数量" width="120">
          <template #default="{ row, $index }">
            <el-input-number
                v-model="row.qualifiedCount"
                :controls="false"
                :precision="0"
                :min="0"
                style="width: 80px"
            />
          </template>
        </el-table-column>

        <el-table-column label="次品数量" width="120">
          <template #default="{ row, $index }">
            <el-input-number
                v-model="row.defectiveCount"
                :controls="false"
                :precision="0"
                :min="0"
                style="width: 80px"
            />
          </template>
        </el-table-column>

        <el-table-column label="报废数量" width="120">
          <template #default="{ row, $index }">
            <el-input-number
                v-model="row.scrappedCount"
                :controls="false"
                :precision="0"
                :min="0"
                style="width: 80px"
            />
          </template>
        </el-table-column>

        <el-table-column
            prop="zip"
            label="操作"
            width="100"
            fixed="right"
            align="center"
        >
          <template #default="{ $index }">
            <el-button type="primary" link @click="list.splice($index,1)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <template #footer>
        <el-button @click="visible = false" size="large">取 消</el-button>
        <el-button
            type="primary"
            @click="submitForm()"
            size="large"
            :loading="submitLoading"
        >
          确 定
        </el-button>
      </template>
    </el-dialog>

    <el-dialog
        v-model="productVisible"
        title="选择产品"
        width="70%"
        append-to-body
    >
      <byTable
          :hideSearch="true"
          :source="productSource"
          :pagination="productPagination"
          :config="productConfig"
          :loading="productLoading"
          @get-list="getProductSource"
          highlight-current-row
          :selectConfig="[]"
          :table-events="{}"
          :action-list="[]"
      >
      </byTable>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="productVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>
<script setup>
import byTable from "@/components/byTable/index";
import {computed, getCurrentInstance, ref} from "vue";
import {ElMessage} from "element-plus";

const {proxy} = getCurrentInstance();

const emits = defineEmits(['submit'])

const submitLoading = ref(false);
const list = ref([])
const visible = ref(false)
const loading = ref(false)
const productVisible = ref(false)
const productLoading = ref(false)
const productSource = ref([])
const productPagination = ref({
  total: 0,
  pageNum: 1,
  pageSize: 10,
})

const productConfig = computed(() => {
  return [
    {
      attrs: {
        label: "物品编码",
        prop: "productCustomCode",
      },
    },
    {
      attrs: {
        label: "物品名称",
        prop: "productName",
      },
    },
    {
      attrs: {
        label: "规格",
        prop: "productSpec",
      },
    },
    {
      attrs: {
        label: "单位",
        prop: "productUnit",
      },
    },
    {
      attrs: {
        label: "待质检数量",
        prop: "quantity",
      },
    },
    {
      attrs: {
        label: "操作",
      },
      renderHTML(row) {
        if (!list.value.map(item => item.productCustomCode).includes(row.productCustomCode)) {
          return [
            {
              attrs: {
                label: "选择",
                type: "primary",
                text: true,
              },
              el: "button",
              click() {
                list.value.push({
                  ...row,
                  qualifiedCount: row.quantity,
                  defectiveCount: 0,
                  scrappedCount: 0
                })
              },
            },
          ]
        } else {
          return []
        }
      },
    },
  ];
});

const open = () => {
  visible.value = true
}

const handleOpen = () => {
  productVisible.value = true
  getProductSource()
}

const getProductSource = (req) => {
  productPagination.value = {...productPagination.value, ...req}

  productLoading.value = true
  proxy.post("/jdRefundNotQualityCheck/page", productPagination.value)
      .then((data) => {
        productSource.value = data.rows;
        productPagination.value.total = data.total;
      })
      .finally(_ => {
        productLoading.value = false;
      })
}

const submitForm = () => {
  for (let item of list.value) {
    item.qualifiedCount = item.qualifiedCount ?? 0
    item.defectiveCount = item.defectiveCount ?? 0
    item.scrappedCount = item.scrappedCount ?? 0

    if (item.qualifiedCount + item.defectiveCount + item.scrappedCount > item.quantity) {
      ElMessage.error(`物品【${item.productCustomCode}】 良品数量+次品数量+报废数量 大于 质检数量`)
      return
    }
  }

  loading.value = true
  proxy.post("/jdRefundNotQualityCheck/submitQualityCheck", list.value)
      .then(() => {
        emits('submit')
        ElMessage.success(`质检成功`)
        visible.value = false
        list.value = []
      })
      .finally(_ => {
        loading.value = false;
      })
}



defineExpose({open})
</script>