sd-new-vue/src/views/group/product/associated-configuration/index.vue

<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>