sd-new-vue/src/components/makeProduct/modification/index.vue

<template>
  <div style="height: calc(100vh - 114px); overflow-y: auto; overflow-x: hidden">
    <byTable
      :hideTable="true"
      :hidePagination="true"
      :source="sourceList.data"
      :pagination="sourceList.pagination"
      :config="config"
      :searchConfig="searchConfig"
      highlight-current-row
      @get-list="getList"
      @clickReset="clickReset">
    </byTable>
    <div style="margin-bottom: 10px; display: flex">
      <div style="height: 30px; line-height: 30px; margin-right: 10px">
        <el-button type="primary" @click="handleBOM()" v-preReClick>选择bom</el-button>
      </div>
      <div style="height: 30px; line-height: 30px; margin-right: 10px">
        <el-button type="primary" @click="handleReset" text>重置</el-button>
      </div>
      <div style="height: 30px; line-height: 30px; margin-right: 10px">
        <el-button type="primary" @click="handleReplace" text>一键替换</el-button>
      </div>
    </div>

    <el-table :data="selectData" :cell-style="{ padding: '0' }" :row-style="{ height: '35px' }" header-row-class-name="tableHeader" style="margin-bottom: 10px">
      <el-table-column label="品号" prop="code" width="220" />
      <el-table-column label="品名" prop="name" min-width="220" />
      <el-table-column label="操作" align="center" width="120">
        <template #default="{ row, $index }">
          <el-button type="text" @click="handleDelete($index)">删 除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br />

    <el-table :data="sourceList.data" :row-style="{ height: '35px' }" header-row-class-name="tableHeader" v-loading="loading">
      <el-table-column label="群组品号" prop="skuCode" width="140" />
      <el-table-column label="SKU品号" prop="skuSpecCode" width="160" />
      <el-table-column label="品名" prop="skuSpecName" min-width="260" />
      <el-table-column label="裸垫品号" prop="bomSpecCode" width="180" />
    </el-table>

    <el-row style="padding: 10px 0" justify="end" type="flex">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="sourceList.pagination.pageNum"
        :page-size="sourceList.pagination.pageSize"
        :total="sourceList.pagination.total"
        @current-change="handlePageChange"
        @size-change="handleSizeChange" />
    </el-row>

    <el-dialog title="选择BOM" v-if="openBOM" v-model="openBOM" width="84%">
      <SelectBOM :selectStatus="true" @selectBOM="selectBOM"></SelectBOM>
      <template #footer>
        <el-button @click="openBOM = false" size="large">关 闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import byTable from "/src/components/byTable/index";
import SelectBOM from "/src/views/group/BOM/management/index";
import { ElMessage, ElMessageBox } from "element-plus";

const { proxy } = getCurrentInstance();
const props = defineProps({
  type: String,
});
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    skuCode: "",
    skuSpecCode: "",
    bomSpecCode: "",
    length: "",
    width: "",
    height: "",
    type: props.type,
  },
});
const loading = ref(false);
const searchConfig = computed(() => {
  return [
    {
      type: "input",
      prop: "skuCode",
      label: "群组品号",
    },
    {
      type: "input",
      prop: "skuSpecCode",
      label: "SKU品号",
    },
    {
      type: "input",
      prop: "bomSpecCode",
      label: "BOM品号",
    },
    {
      type: "input",
      prop: "length",
      label: "长",
    },
    {
      type: "input",
      prop: "width",
      label: "宽",
    },
    {
      type: "input",
      prop: "height",
      label: "高",
    },
  ];
});
const config = computed(() => {
  return [];
});
const getList = async (req, status) => {
  if (status) {
    sourceList.value.pagination = {
      pageNum: sourceList.value.pagination.pageNum,
      pageSize: sourceList.value.pagination.pageSize,
    };
  } else {
    sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  }
  loading.value = true;
  proxy.post("/sku/getReplacePrincipalMaterialPage", sourceList.value.pagination).then((res) => {
    sourceList.value.data = res.rows;
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
getList();
const clickReset = () => {
  getList("", true);
};
const handlePageChange = (val) => {
  getList({ pageNum: val });
};
const handleSizeChange = (val) => {
  getList({ pageNum: 1, pageSize: val });
};
const openBOM = ref(false);
const selectData = ref([]);
const handleBOM = () => {
  openBOM.value = true;
};
const selectBOM = (item) => {
  selectData.value = [item];
  ElMessage({ message: "选择完成", type: "success" });
  openBOM.value = false;
};
const handleDelete = (index) => {
  selectData.value.splice(index, 1);
};
const handleReset = () => {
  selectData.value = [];
};
const handleReplace = () => {
  if (selectData.value && selectData.value.length > 0) {
    ElMessageBox.confirm("是否确认替换所有BOM", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        proxy.post("/sku/replacePrincipalMaterial", { ...sourceList.value.pagination, replaceBomSpecId: selectData.value[0].id }).then(() => {
          ElMessage({ message: "替换成功", type: "success" });
          getList();
        });
      })
      .catch(() => {});
  } else {
    return ElMessage("请选择BOM");
  }
};
</script>

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