spring
2025-11-20 5384750e59bbb27c54e090100429c48eaba46df0
src/pages/production/wire/report/rawMaterial.vue
@@ -30,6 +30,7 @@
                  v-model="materialData.conductivity"
                  range-key="label"
                  placeholder="请输入"
                  type="number"
                ></wd-input>
              </wd-form-item>
              <wd-form-item label="抗拉强度(Mpa)" prop="tensileStrength" required>
@@ -37,6 +38,7 @@
                  v-model="materialData.tensileStrength"
                  range-key="label"
                  placeholder="请输入"
                  type="number"
                ></wd-input>
              </wd-form-item>
              <wd-form-item label="电阻率(nΩ·m)" prop="resistivity" required>
@@ -44,6 +46,7 @@
                  v-model="materialData.resistivity"
                  range-key="label"
                  placeholder="请输入"
                  type="number"
                ></wd-input>
              </wd-form-item>
              <wd-form-item label="伸长率(%)" prop="elongationRate" required>
@@ -51,15 +54,25 @@
                  v-model="materialData.elongationRate"
                  range-key="label"
                  placeholder="请输入"
                  type="number"
                ></wd-input>
              </wd-form-item>
              <wd-form-item label="外观质量" prop="appearanceQuality" required>
                <wd-select-picker
                  v-model="materialData.appearanceQuality"
                  range-key="label"
                  :columns="drawing_appearanceQuality"
                  placeholder="请选择"
                ></wd-select-picker>
                <view class="checkbox-group">
                  <wd-checkbox
                    v-for="option in drawing_appearanceQuality"
                    :key="option.value"
                    :modelValue="
                      Array.isArray(materialData.appearanceQuality)
                        ? materialData.appearanceQuality.includes(String(option.value))
                        : false
                    "
                    shape="square"
                    @change="(val) => handleAppearanceQualityCheckbox(String(option.value), val)"
                  >
                    {{ option.label }}
                  </wd-checkbox>
                </view>
              </wd-form-item>
            </wd-form>
          </view>
@@ -73,7 +86,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ref, onMounted, watch, nextTick } from "vue";
import { useToast } from "wot-design-uni";
import ManageApi from "@/api/product/manage";
@@ -131,9 +144,104 @@
const activeTab = ref("reel"); // 与tab的name保持一致
const toast = useToast();
// 存储前一个外观质量值,用于比较变化
const previousAppearanceQuality = ref<string[]>([]);
// 处理外观质量下拉框的互斥选择逻辑
const handleAppearanceQualityChange = (
  selectedValues: string[],
  allOptions: Array<{ label: string; value: string | number }>
): string[] => {
  // 如果没有选项数据,直接返回
  if (!allOptions || allOptions.length === 0) {
    return selectedValues;
  }
  // 获取之前的值
  const previousValues = previousAppearanceQuality.value || [];
  // 查找"无外观问题"选项的值
  const noIssueOption = allOptions.find(
    (item) => item.label === "无外观问题" || item.value === "无外观问题"
  );
  if (!noIssueOption) {
    // 如果字典中没有"无外观问题"选项,直接返回
    return selectedValues;
  }
  const noIssueValue = String(noIssueOption.value);
  // 检查当前选中值中是否包含"无外观问题"
  const hasNoIssue = selectedValues.includes(noIssueValue);
  // 检查之前是否包含"无外观问题"
  const hadNoIssue = previousValues.includes(noIssueValue);
  // 判断是否新选择了"无外观问题"(之前没有,现在有)
  const isNewlySelectedNoIssue = !hadNoIssue && hasNoIssue;
  // 判断是否移除了"无外观问题"(之前有,现在没有)
  const isRemovedNoIssue = hadNoIssue && !hasNoIssue;
  // 判断是否在"无外观问题"已选中的情况下选择了其他选项
  const isSelectingOtherWithNoIssue =
    hadNoIssue && hasNoIssue && selectedValues.length > previousValues.length;
  let result: string[];
  if (isNewlySelectedNoIssue) {
    // 如果新选择了"无外观问题",则只保留"无外观问题"
    result = [noIssueValue];
  } else if (isSelectingOtherWithNoIssue) {
    // 如果"无外观问题"已经被选中,且新选择了其他选项,则移除"无外观问题"
    result = selectedValues.filter((val) => val !== noIssueValue);
  } else if (isRemovedNoIssue) {
    // 如果移除了"无外观问题",直接返回(已经是其他选项了)
    result = selectedValues;
  } else {
    result = selectedValues;
  }
  // 保存当前值作为下一次的前一个值
  previousAppearanceQuality.value = result;
  return result;
};
// 处理复选框的change事件
const handleAppearanceQualityCheckbox = (optionValue: string, checked: boolean) => {
  const currentValues = Array.isArray(materialData.value.appearanceQuality)
    ? materialData.value.appearanceQuality
    : [];
  let newValues: string[];
  if (checked) {
    // 选中
    newValues = [...currentValues, optionValue];
  } else {
    // 取消选中
    newValues = currentValues.filter((v) => v !== optionValue);
  }
  // 应用互斥逻辑
  const result = handleAppearanceQualityChange(
    newValues,
    drawing_appearanceQuality.value as Array<{ label: string; value: string | number }>
  );
  // 更新值
  materialData.value.appearanceQuality = result;
};
// 本地响应式数据,用于存储用户输入
const materialData = ref<Record<string, any>>({});
const initializeData = () => {
  // 查找"无外观问题"的值
  const noIssueOption = drawing_appearanceQuality.value.find(
    (item) => item.label === "无外观问题" || item.value === "无外观问题"
  );
  const defaultAppearanceQuality = noIssueOption ? [String(noIssueOption.value)] : [];
  // 初始化原材料数据
  materialData.value = {
    model: "",
@@ -142,8 +250,11 @@
    tensileStrength: "",
    resistivity: "",
    elongationRate: "",
    appearanceQuality: "",
    appearanceQuality: defaultAppearanceQuality,
  };
  // 初始化前一个值
  previousAppearanceQuality.value = defaultAppearanceQuality;
};
// 初始化数据
@@ -152,7 +263,32 @@
// 在组件挂载时异步加载数据字典
onMounted(async () => {
  await loadDictData();
  // 字典数据加载完成后,重新初始化数据,确保默认值能正确匹配
  initializeData();
});
// 监听外观质量变化,应用互斥逻辑
watch(
  () => materialData.value.appearanceQuality,
  (newValue, oldValue) => {
    const normalizedNewValue = Array.isArray(newValue) ? newValue : [];
    const normalizedOldValue = Array.isArray(oldValue) ? oldValue : [];
    // 应用互斥逻辑
    const result = handleAppearanceQualityChange(
      normalizedNewValue,
      drawing_appearanceQuality.value as Array<{ label: string; value: string | number }>
    );
    // 如果值被修改了,异步更新,避免在监听中同步修改
    if (JSON.stringify(result) !== JSON.stringify(normalizedNewValue)) {
      nextTick(() => {
        materialData.value.appearanceQuality = result;
      });
    }
  },
  { deep: true }
);
// 监听props变化,更新本地数据
@@ -166,6 +302,30 @@
};
const handleSubmit = async () => {
  // 表单验证
  if (
    !materialData.value.model ||
    materialData.value.model === "" ||
    !materialData.value.spec ||
    materialData.value.spec === "" ||
    !materialData.value.conductivity ||
    materialData.value.conductivity === "" ||
    !materialData.value.tensileStrength ||
    materialData.value.tensileStrength === "" ||
    !materialData.value.resistivity ||
    materialData.value.resistivity === "" ||
    !materialData.value.elongationRate ||
    materialData.value.elongationRate === "" ||
    !materialData.value.appearanceQuality ||
    (Array.isArray(materialData.value.appearanceQuality) &&
      materialData.value.appearanceQuality.length === 0) ||
    (!Array.isArray(materialData.value.appearanceQuality) &&
      materialData.value.appearanceQuality === "")
  ) {
    toast.error("请填写完整的必填项");
    return false;
  }
  try {
    // 调用API提交数据
    await ManageApi.addWireRawMaterialInspect({
@@ -273,47 +433,13 @@
  width: 100%;
}
// 美化选择器样式 - 增加权重确保样式生效
:deep(.wd-select-picker) {
  & .wd-select-picker__option {
    text-align: center !important;
    padding: 12px 0 !important;
    font-size: 16px !important;
  }
  & .wd-select-picker__confirm {
    border-radius: 8px !important;
    background-color: #409eff !important;
    color: white !important;
    font-weight: 500 !important;
  }
  & .wd-select-picker__header {
    padding: 10px 0 !important;
    border-bottom: 1px solid #e6e6e6 !important;
  }
  & .wd-select-picker__title {
    font-size: 16px !important;
    font-weight: 500 !important;
  }
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
// 确保选择器内部选项居中 - 更通用的选择器
:deep(.wd-select-picker__content) {
  .wd-select-picker__option {
    text-align: center !important;
    padding: 12px 0 !important;
    font-size: 16px !important;
  }
}
// 直接针对选项元素的选择器
:deep([class*="select-picker"].wd-popup) {
  .wd-select-picker__option {
    text-align: center !important;
    padding: 12px 0 !important;
    font-size: 16px !important;
  }
:deep(.wd-checkbox) {
  margin-right: 0;
}
</style>