| | |
| | | v-model="materialData.conductivity" |
| | | range-key="label" |
| | | placeholder="请输入" |
| | | type="number" |
| | | ></wd-input> |
| | | </wd-form-item> |
| | | <wd-form-item label="抗拉强度(Mpa)" prop="tensileStrength" required> |
| | |
| | | v-model="materialData.tensileStrength" |
| | | range-key="label" |
| | | placeholder="请输入" |
| | | type="number" |
| | | ></wd-input> |
| | | </wd-form-item> |
| | | <wd-form-item label="电阻率(nΩ·m)" prop="resistivity" required> |
| | |
| | | v-model="materialData.resistivity" |
| | | range-key="label" |
| | | placeholder="请输入" |
| | | type="number" |
| | | ></wd-input> |
| | | </wd-form-item> |
| | | <wd-form-item label="伸长率(%)" prop="elongationRate" required> |
| | |
| | | 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> |
| | |
| | | </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"; |
| | | |
| | |
| | | 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: "", |
| | |
| | | tensileStrength: "", |
| | | resistivity: "", |
| | | elongationRate: "", |
| | | appearanceQuality: "", |
| | | appearanceQuality: defaultAppearanceQuality, |
| | | }; |
| | | |
| | | // 初始化前一个值 |
| | | previousAppearanceQuality.value = defaultAppearanceQuality; |
| | | }; |
| | | |
| | | // 初始化数据 |
| | |
| | | // 在组件挂载时异步加载数据字典 |
| | | 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变化,更新本地数据 |
| | | |
| | |
| | | }; |
| | | |
| | | 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({ |
| | |
| | | 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> |