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

<template>
  <div class="config-group">
    <div class="group-header">
      <div class="group-title">{{ partName }}</div>
    </div>

    <div v-for="(item, index) in selectedConfigItems" :key="item.pzid" class="config-row">
      <el-select
        v-model="item.pzid"
        placeholder="选择选配项"
        size="small"
        class="select-config-item"
        @change="onConfigItemChange(item)"
      >
        <el-option v-for="option in configItemOptions" :key="option.pzid" :label="option.pzname" :value="option.pzid" />
      </el-select>

      <!-- 配置值选择 -->
      <el-select
        v-model="item.selectedValue"
        placeholder="选择选配值"
        size="small"
        class="select-config-value"
        value-key="namemx"
        @change="value => onConfigValueChange(item, value)"
      >
        <el-option v-for="opt in valueListByPzid(item.pzid)" :key="opt.printid" :label="opt.namemx" :value="opt" />
      </el-select>

      <i class="iconfont icontrash-01 delete-icon" @click="removeConfigItem(index)" title="删除选配项" />
    </div>

    <div class="add-config-btn">
      <el-button type="primary" icon="el-icon-plus" size="small" @click="addConfigItem"> 添加选配项 </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, PropType, watch } from "vue";
import { ElMessage } from "element-plus";

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

const props = defineProps({
  partName: { type: String, required: true },
  selectedConfigItems: { type: Array as PropType<SelectedConfigItem[]>, required: true },
  configItemOptions: { type: Array as PropType<ConfigItemOption[]>, required: true },
  configValueOptionsMap: { type: Object as PropType<Record<number, ConfigValue[]>>, required: true }
});

const emit = defineEmits(["update:selectedConfigItems"]);

const valueListByPzid = (pzid: number) => {
  return props.configValueOptionsMap[pzid] || [];
};

const onConfigItemChange = (item: SelectedConfigItem) => {
  const options = valueListByPzid(item.pzid);
  item.selectedId = options.length > 0 ? options[0].printid : 0;
  item.selectedValue = options.length > 0 ? options[0].namemx : "";
};

const onConfigValueChange = (item: SelectedConfigItem, value: any) => {
  item.selectedId = value.printid;
  item.selectedValue = value.namemx;
};

const removeConfigItem = (index: number) => {
  const newList = [...props.selectedConfigItems];
  newList.splice(index, 1);
  emit("update:selectedConfigItems", newList);
};

const addConfigItem = () => {
  if (props.configItemOptions.length === 0) {
    ElMessage.error(`${props.partName}没有设置相关选配项`);
    return;
  }

  const defaultPzid = props.configItemOptions[0].pzid;
  const defaultValues = props.configValueOptionsMap[defaultPzid] || [];

  const newItem: SelectedConfigItem = {
    pzid: defaultPzid,
    selectedId: defaultValues.length > 0 ? defaultValues[0].printid : 0,
    selectedValue: defaultValues.length > 0 ? defaultValues[0].namemx : ""
  };

  emit("update:selectedConfigItems", [...props.selectedConfigItems, newItem]);
};
</script>

<style scoped lang="scss">
.config-section-card {
  margin-bottom: 16px;
}

.card-header {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 12px;
}

.config-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  width: 100%;
}

.select-config-item {
  flex: 1;
}

.select-config-value {
  flex: 3;
}

/* 删除图标样式 */
.delete-icon {
  cursor: pointer;
  font-size: 18px;
  user-select: none;
}

/* 添加选配项按钮左对齐 */
.add-config-btn {
  margin-top: 12px;
  text-align: left;
}

.config-group {
  background: #fafafa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  margin-bottom: 15px;
  padding: 10px;
  position: relative;
}

.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #ebeef5;
}

.group-title {
  font-weight: 500;
  color: #409eff;
  font-size: 15px;
}
</style>