|
@@ -0,0 +1,540 @@
|
|
|
+<template>
|
|
|
+ <el-card class="box-card" v-loading="loadingCard">
|
|
|
+ <byTable
|
|
|
+ :hidePagination="true"
|
|
|
+ :source="sourceList.data"
|
|
|
+ :config="config"
|
|
|
+ :loading="loading"
|
|
|
+ highlight-current-row
|
|
|
+ :action-list="[
|
|
|
+ // {
|
|
|
+ // text: '新增',
|
|
|
+ // action: () => clickModal(),
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ text: '应用包材配置',
|
|
|
+ action: () => clickUse(),
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ @get-list="getList">
|
|
|
+ </byTable>
|
|
|
+
|
|
|
+ <el-dialog :title="modalType == 'add' ? '新增包材配置' : '编辑包材配置'" v-if="openDialog" v-model="openDialog" width="500">
|
|
|
+ <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
|
|
|
+ <template #oppMembraneId>
|
|
|
+ <div style="width: 100%">
|
|
|
+ <el-button
|
|
|
+ v-if="!formData.data.oppMembraneId || formData.data.oppMembraneId === '0'"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="handleOpen('oppMembrane', '1682221249268375554')"
|
|
|
+ style="margin: 5px 0; background-color: #43b214; border-color: #43b214">
|
|
|
+ 选择BOM
|
|
|
+ </el-button>
|
|
|
+ <div style="width: 100%; display: flex; align-items: center" v-else>
|
|
|
+ <el-icon style="font-size: 16px; cursor: pointer" @click="clickRemove('oppMembrane')"><Remove /></el-icon>
|
|
|
+ <span>{{ formData.data.oppMembraneCode }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #peBagId>
|
|
|
+ <div style="width: 100%">
|
|
|
+ <el-button
|
|
|
+ v-if="!formData.data.peBagId || formData.data.peBagId === '0'"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="handleOpen('peBag', '1682221303530086402')"
|
|
|
+ style="margin: 5px 0; background-color: #43b214; border-color: #43b214">
|
|
|
+ 选择BOM
|
|
|
+ </el-button>
|
|
|
+ <div style="width: 100%; display: flex; align-items: center" v-else>
|
|
|
+ <el-icon style="font-size: 16px; cursor: pointer" @click="clickRemove('peBag')"><Remove /></el-icon>
|
|
|
+ <span>{{ formData.data.peBagCode }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #meshBagId>
|
|
|
+ <div style="width: 100%">
|
|
|
+ <el-button
|
|
|
+ v-if="!formData.data.meshBagId || formData.data.meshBagId === '0'"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="handleOpen('meshBag', '1682221356147630081')"
|
|
|
+ style="margin: 5px 0; background-color: #43b214; border-color: #43b214">
|
|
|
+ 选择BOM
|
|
|
+ </el-button>
|
|
|
+ <div style="width: 100%; display: flex; align-items: center" v-else>
|
|
|
+ <el-icon style="font-size: 16px; cursor: pointer" @click="clickRemove('meshBag')"><Remove /></el-icon>
|
|
|
+ <span>{{ formData.data.meshBagCode }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #bubblePackId>
|
|
|
+ <div style="width: 100%">
|
|
|
+ <el-button
|
|
|
+ v-if="!formData.data.bubblePackId || formData.data.bubblePackId === '0'"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="handleOpen('bubblePack', '1682221453145104386')"
|
|
|
+ style="margin: 5px 0; background-color: #43b214; border-color: #43b214">
|
|
|
+ 选择BOM
|
|
|
+ </el-button>
|
|
|
+ <div style="width: 100%; display: flex; align-items: center" v-else>
|
|
|
+ <el-icon style="font-size: 16px; cursor: pointer" @click="clickRemove('bubblePack')"><Remove /></el-icon>
|
|
|
+ <span>{{ formData.data.bubblePackCode }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #suspendersId>
|
|
|
+ <div style="width: 100%">
|
|
|
+ <el-button
|
|
|
+ v-if="!formData.data.suspendersId || formData.data.suspendersId === '0'"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="handleOpen('suspenders', '1682221651040755714')"
|
|
|
+ style="margin: 5px 0; background-color: #43b214; border-color: #43b214">
|
|
|
+ 选择BOM
|
|
|
+ </el-button>
|
|
|
+ <div style="width: 100%; display: flex; align-items: center" v-else>
|
|
|
+ <el-icon style="font-size: 16px; cursor: pointer" @click="clickRemove('suspenders')"><Remove /></el-icon>
|
|
|
+ <span>{{ formData.data.suspendersCode }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #colouredPaperId>
|
|
|
+ <div style="width: 100%">
|
|
|
+ <el-button
|
|
|
+ v-if="!formData.data.colouredPaperId || formData.data.colouredPaperId === '0'"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="handleOpen('colouredPaper', '1682221201491058690')"
|
|
|
+ style="margin: 5px 0; background-color: #43b214; border-color: #43b214">
|
|
|
+ 选择BOM
|
|
|
+ </el-button>
|
|
|
+ <div style="width: 100%; display: flex; align-items: center" v-else>
|
|
|
+ <el-icon style="font-size: 16px; cursor: pointer" @click="clickRemove('colouredPaper')"><Remove /></el-icon>
|
|
|
+ <span>{{ formData.data.colouredPaperCode }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #selfAdhesiveStickerId>
|
|
|
+ <div style="width: 100%">
|
|
|
+ <el-button
|
|
|
+ v-if="!formData.data.selfAdhesiveStickerId || formData.data.selfAdhesiveStickerId === '0'"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="handleOpen('selfAdhesiveSticker', '1697442459841290241')"
|
|
|
+ style="margin: 5px 0; background-color: #43b214; border-color: #43b214">
|
|
|
+ 选择BOM
|
|
|
+ </el-button>
|
|
|
+ <div style="width: 100%; display: flex; align-items: center" v-else>
|
|
|
+ <el-icon style="font-size: 16px; cursor: pointer" @click="clickRemove('selfAdhesiveSticker')"><Remove /></el-icon>
|
|
|
+ <span>{{ formData.data.selfAdhesiveStickerCode }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #dropId>
|
|
|
+ <div style="width: 100%">
|
|
|
+ <el-button
|
|
|
+ v-if="!formData.data.dropId || formData.data.dropId === '0'"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="handleOpen('drop', '1697442971286331393')"
|
|
|
+ style="margin: 5px 0; background-color: #43b214; border-color: #43b214">
|
|
|
+ 选择BOM
|
|
|
+ </el-button>
|
|
|
+ <div style="width: 100%; display: flex; align-items: center" v-else>
|
|
|
+ <el-icon style="font-size: 16px; cursor: pointer" @click="clickRemove('drop')"><Remove /></el-icon>
|
|
|
+ <span>{{ formData.data.dropCode }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #logisticsPackagingMaterialId>
|
|
|
+ <div style="width: 100%">
|
|
|
+ <el-button
|
|
|
+ v-if="!formData.data.logisticsPackagingMaterialId || formData.data.logisticsPackagingMaterialId === '0'"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="handleOpen('logisticsPackagingMaterial', '1682221528948760578')"
|
|
|
+ style="margin: 5px 0; background-color: #43b214; border-color: #43b214">
|
|
|
+ 选择BOM
|
|
|
+ </el-button>
|
|
|
+ <div style="width: 100%; display: flex; align-items: center" v-else>
|
|
|
+ <el-icon style="font-size: 16px; cursor: pointer" @click="clickRemove('logisticsPackagingMaterial')"><Remove /></el-icon>
|
|
|
+ <span>{{ formData.data.logisticsPackagingMaterialCode }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #otherPackingMaterialId>
|
|
|
+ <div style="width: 100%">
|
|
|
+ <el-button
|
|
|
+ v-if="!formData.data.otherPackingMaterialId || formData.data.otherPackingMaterialId === '0'"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="handleOpen('otherPackingMaterial', '1682221581453058049')"
|
|
|
+ style="margin: 5px 0; background-color: #43b214; border-color: #43b214">
|
|
|
+ 选择BOM
|
|
|
+ </el-button>
|
|
|
+ <div style="width: 100%; display: flex; align-items: center" v-else>
|
|
|
+ <el-icon style="font-size: 16px; cursor: pointer" @click="clickRemove('otherPackingMaterial')"><Remove /></el-icon>
|
|
|
+ <span>{{ formData.data.otherPackingMaterialCode }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </byForm>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="openDialog = false" size="large">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm()" size="large" v-preReClick>确 定</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-dialog title="选择BOM" v-if="openBOM" v-model="openBOM" width="84%">
|
|
|
+ <SelectBOM :selectStatus="true" :expressStatus="true" :bomClassifyId="bomClassifyId" @selectBOM="selectBOM"></SelectBOM>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="openBOM = false" size="large">关 闭</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </el-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import byTable from "/src/components/byTable/index";
|
|
|
+import byForm from "/src/components/byForm/index";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
+import SelectBOM from "/src/views/group/BOM/management/index";
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const skuList = ref([]);
|
|
|
+const sourceList = ref({
|
|
|
+ data: [],
|
|
|
+});
|
|
|
+const loading = ref(false);
|
|
|
+const config = computed(() => {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "尺寸",
|
|
|
+ prop: "spec",
|
|
|
+ align: "center",
|
|
|
+ width: 180,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "OPP膜",
|
|
|
+ prop: "oppMembraneCode",
|
|
|
+ align: "center",
|
|
|
+ },
|
|
|
+ render(val) {
|
|
|
+ if (val) {
|
|
|
+ return val;
|
|
|
+ }
|
|
|
+ return "-";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "PE袋",
|
|
|
+ prop: "peBagCode",
|
|
|
+ align: "center",
|
|
|
+ },
|
|
|
+ render(val) {
|
|
|
+ if (val) {
|
|
|
+ return val;
|
|
|
+ }
|
|
|
+ return "-";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "网包",
|
|
|
+ prop: "meshBagCode",
|
|
|
+ align: "center",
|
|
|
+ },
|
|
|
+ render(val) {
|
|
|
+ if (val) {
|
|
|
+ return val;
|
|
|
+ }
|
|
|
+ return "-";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "气泡袋",
|
|
|
+ prop: "bubblePackCode",
|
|
|
+ align: "center",
|
|
|
+ },
|
|
|
+ render(val) {
|
|
|
+ if (val) {
|
|
|
+ return val;
|
|
|
+ }
|
|
|
+ return "-";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "松紧圈/背带",
|
|
|
+ prop: "suspendersCode",
|
|
|
+ align: "center",
|
|
|
+ },
|
|
|
+ render(val) {
|
|
|
+ if (val) {
|
|
|
+ return val;
|
|
|
+ }
|
|
|
+ return "-";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "彩纸",
|
|
|
+ prop: "colouredPaperCode",
|
|
|
+ align: "center",
|
|
|
+ },
|
|
|
+ render(val) {
|
|
|
+ if (val) {
|
|
|
+ return val;
|
|
|
+ }
|
|
|
+ return "-";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "不干胶",
|
|
|
+ prop: "selfAdhesiveStickerCode",
|
|
|
+ align: "center",
|
|
|
+ },
|
|
|
+ render(val) {
|
|
|
+ if (val) {
|
|
|
+ return val;
|
|
|
+ }
|
|
|
+ return "-";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "吊牌",
|
|
|
+ prop: "dropCode",
|
|
|
+ align: "center",
|
|
|
+ },
|
|
|
+ render(val) {
|
|
|
+ if (val) {
|
|
|
+ return val;
|
|
|
+ }
|
|
|
+ return "-";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "快递包材",
|
|
|
+ prop: "logisticsPackagingMaterialCode",
|
|
|
+ align: "center",
|
|
|
+ },
|
|
|
+ render(val) {
|
|
|
+ if (val) {
|
|
|
+ return val;
|
|
|
+ }
|
|
|
+ return "-";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "其他包材",
|
|
|
+ prop: "otherPackingMaterialCode",
|
|
|
+ align: "center",
|
|
|
+ },
|
|
|
+ render(val) {
|
|
|
+ if (val) {
|
|
|
+ return val;
|
|
|
+ }
|
|
|
+ return "-";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "操作",
|
|
|
+ width: 80,
|
|
|
+ align: "center",
|
|
|
+ fixed: "right",
|
|
|
+ },
|
|
|
+ renderHTML(row) {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "编辑",
|
|
|
+ type: "primary",
|
|
|
+ text: true,
|
|
|
+ },
|
|
|
+ el: "button",
|
|
|
+ click() {
|
|
|
+ clickUpdate(row);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+});
|
|
|
+const getDemandData = () => {
|
|
|
+ proxy.post("/sku/list", {}).then((res) => {
|
|
|
+ if (res && res.length > 0) {
|
|
|
+ skuList.value = res.map((item) => {
|
|
|
+ return {
|
|
|
+ value: item.id,
|
|
|
+ label: item.code,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+getDemandData();
|
|
|
+const getList = async () => {
|
|
|
+ loading.value = true;
|
|
|
+ proxy.post("/skuDefaultPackageSpec/page", { pageNum: 1, pageSize: 999 }).then((res) => {
|
|
|
+ sourceList.value.data = res.rows;
|
|
|
+ setTimeout(() => {
|
|
|
+ loading.value = false;
|
|
|
+ }, 200);
|
|
|
+ });
|
|
|
+};
|
|
|
+getList();
|
|
|
+const modalType = ref("add");
|
|
|
+const openDialog = ref(false);
|
|
|
+const submit = ref(null);
|
|
|
+const formOption = reactive({
|
|
|
+ inline: true,
|
|
|
+ labelWidth: "80px",
|
|
|
+ itemWidth: 100,
|
|
|
+ rules: [],
|
|
|
+ labelPosition: "right",
|
|
|
+});
|
|
|
+const formData = reactive({
|
|
|
+ data: {},
|
|
|
+});
|
|
|
+const formConfig = computed(() => {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ prop: "spec",
|
|
|
+ label: "规格",
|
|
|
+ disabled: modalType.value === "edit" ? true : false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "slot",
|
|
|
+ slotName: "oppMembraneId",
|
|
|
+ label: "OPP膜",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "slot",
|
|
|
+ slotName: "peBagId",
|
|
|
+ label: "PE袋",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "slot",
|
|
|
+ slotName: "meshBagId",
|
|
|
+ label: "网包",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "slot",
|
|
|
+ slotName: "bubblePackId",
|
|
|
+ label: "气泡袋",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "slot",
|
|
|
+ slotName: "suspendersId",
|
|
|
+ label: "背带",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "slot",
|
|
|
+ slotName: "colouredPaperId",
|
|
|
+ label: "彩纸",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "slot",
|
|
|
+ slotName: "selfAdhesiveStickerId",
|
|
|
+ label: "不干胶",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "slot",
|
|
|
+ slotName: "dropId",
|
|
|
+ label: "吊牌",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "slot",
|
|
|
+ slotName: "logisticsPackagingMaterialId",
|
|
|
+ label: "快递包材",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "slot",
|
|
|
+ slotName: "otherPackingMaterialId",
|
|
|
+ label: "其他包材",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+});
|
|
|
+const rules = ref({
|
|
|
+ spec: [{ required: true, message: "请输入规格", trigger: "blur" }],
|
|
|
+});
|
|
|
+const clickModal = () => {
|
|
|
+ modalType.value = "add";
|
|
|
+ formData.data = {};
|
|
|
+ openDialog.value = true;
|
|
|
+};
|
|
|
+const labelText = ref("");
|
|
|
+const openBOM = ref(false);
|
|
|
+const bomClassifyId = ref("");
|
|
|
+const handleOpen = (label, id) => {
|
|
|
+ labelText.value = label;
|
|
|
+ bomClassifyId.value = id;
|
|
|
+ openBOM.value = true;
|
|
|
+};
|
|
|
+const selectBOM = (data) => {
|
|
|
+ formData.data[labelText.value + "Id"] = data.id;
|
|
|
+ formData.data[labelText.value + "Code"] = data.code;
|
|
|
+ openBOM.value = false;
|
|
|
+ ElMessage({ message: "选择成功", type: "success" });
|
|
|
+};
|
|
|
+const clickRemove = (label) => {
|
|
|
+ formData.data[label + "Id"] = "0";
|
|
|
+ formData.data[label + "Code"] = "0";
|
|
|
+};
|
|
|
+const submitForm = () => {
|
|
|
+ submit.value.handleSubmit(() => {
|
|
|
+ proxy.post("/skuDefaultPackageSpec/" + modalType.value, formData.data).then(() => {
|
|
|
+ ElMessage({
|
|
|
+ message: modalType.value == "add" ? "添加成功" : "编辑成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ openDialog.value = false;
|
|
|
+ getList();
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
+const clickUpdate = (row) => {
|
|
|
+ modalType.value = "edit";
|
|
|
+ proxy.post("/skuDefaultPackageSpec/detail", { id: row.id }).then((res) => {
|
|
|
+ formData.data = res;
|
|
|
+ openDialog.value = true;
|
|
|
+ });
|
|
|
+};
|
|
|
+const loadingCard = ref(false);
|
|
|
+const clickUse = () => {
|
|
|
+ loadingCard.value = true;
|
|
|
+ ElMessage("请稍后,应用包材配置");
|
|
|
+ proxy.post("/skuDefaultPackageSpec/refresh", {}).then(
|
|
|
+ () => {
|
|
|
+ ElMessage({ message: "应用成功", type: "success" });
|
|
|
+ loadingCard.value = false;
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ console.log(err);
|
|
|
+ loadingCard.value = false;
|
|
|
+ }
|
|
|
+ );
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+:deep(.el-dialog) {
|
|
|
+ margin-top: 10px !important;
|
|
|
+ margin-bottom: 10px !important;
|
|
|
+}
|
|
|
+</style>
|