JLH/JLHWEB/src/views/quote/softbedQuote/components/BedConfigModal.vue

<template>
  <LjDialogNew v-bind="$attrs" width="600px" :closed="closed">
    <template #header>
      <div class="flx-1">
        <span class="text-h5-b">配置项值选择</span>
      </div>
    </template>

    <div class="checkbox-area">
      <el-checkbox v-model="showHeadboardModel" label="床头" border></el-checkbox>
      <el-checkbox v-model="showNightstandModel" label="床头柜" border></el-checkbox>
      <el-checkbox v-model="showBedframeModel" label="床架" border></el-checkbox>
    </div>

    <div class="config-sections config-scroll-container">
      <ConfigSection
        v-if="showHeadboardModel"
        part-name="床头"
        v-model:selectedConfigItems="partsConfig.headboard"
        :configItemOptions="headboardConfigOptions"
        :configValueOptionsMap="configValueOptionsMap"
      />

      <ConfigSection
        v-if="showNightstandModel"
        part-name="床头柜"
        v-model:selectedConfigItems="partsConfig.nightstand"
        :configItemOptions="nightstandConfigOptions"
        :configValueOptionsMap="configValueOptionsMap"
      />

      <ConfigSection
        v-if="showBedframeModel"
        part-name="床架"
        v-model:selectedConfigItems="partsConfig.bedframe"
        :configItemOptions="bedframeConfigOptions"
        :configValueOptionsMap="configValueOptionsMap"
      />
    </div>

    <template #footer>
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onConfirm">确认配置</el-button>
    </template>
  </LjDialogNew>
</template>

<script setup lang="ts">
import { PropType, computed } from "vue";
import ConfigSection from "./ConfigSection.vue";
import LjDialogNew from "@/components/LjDialog/index-new.vue";

interface ConfigValue {
  printid: number;
  namemx: string;
}
interface ConfigItemOption {
  pzid: number;
  pzname: string;
}
interface SelectedConfigItem {
  pzid: number;
  selectedId: number;
  selectedValue?: string;
}

const props = defineProps({
  showHeadboard: { type: Boolean, default: true },
  showNightstand: { type: Boolean, default: true },
  showBedframe: { type: Boolean, default: false },
  headboardConfigOptions: { type: Array as PropType<ConfigItemOption[]>, required: true },
  nightstandConfigOptions: { type: Array as PropType<ConfigItemOption[]>, required: true },
  bedframeConfigOptions: { type: Array as PropType<ConfigItemOption[]>, required: true },
  configValueOptionsMap: { type: Object as PropType<Record<number, ConfigValue[]>>, required: true },
  partsConfig: {
    type: Object as PropType<{
      headboard: SelectedConfigItem[];
      nightstand: SelectedConfigItem[];
      bedframe: SelectedConfigItem[];
    }>,
    required: true
  }
});

const emit = defineEmits([
  "update:showHeadboard",
  "update:showNightstand",
  "update:showBedframe",
  "update:partsConfig",
  "cancel",
  "submit",
  "closed",
  "update:modelValue"
]);

const showHeadboardModel = computed({
  get: () => props.showHeadboard,
  set: (val: boolean) => emit("update:showHeadboard", val)
});

const showNightstandModel = computed({
  get: () => props.showNightstand,
  set: (val: boolean) => emit("update:showNightstand", val)
});

const showBedframeModel = computed({
  get: () => props.showBedframe,
  set: (val: boolean) => emit("update:showBedframe", val)
});

const onCancel = () => emit("cancel");

const onConfirm = () => {
  const newParts = { ...props.partsConfig };

  if (!showHeadboardModel.value) {
    newParts.headboard = [];
  }
  if (!showNightstandModel.value) {
    newParts.nightstand = [];
  }
  if (!showBedframeModel.value) {
    newParts.bedframe = [];
  }
  emit("submit", newParts);
};

const closed = () => emit("cancel");
</script>

<style lang="scss">
.el-dialog {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
</style>

<style scoped lang="scss">
.config-scroll-container {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  max-height: 50vh;
}
.checkbox-area {
  padding: 0 0 8px 0;
  border-bottom: 1px solid #ebeef5;
  display: flex;
}
.config-sections {
  padding: 8px 0px;
}
</style>