<template>
|
|
<div style="width: 100%">
|
<template v-for="(itme, index) in dataCollection" :key="index">
|
<div style="width: 90%;height: 120px;margin: auto;;background-color: aliceblue;">
|
<div style="width: 200px;font-size: 18px;text-align: left;">{{itme.process_name}}</div>
|
<div style="display: flex;margin-top: 10px">
|
<template v-for="(itme1, index) in itme.detail" :key="index">
|
<div v-if="itme1.input_type=='select'"
|
style="width: 200px;display: flex;height: 30px;line-height: 30px;">
|
{{itme1.process_name}}：
|
<el-select
|
v-model="dataList[itme.process_type][itme1.process_type]"
|
placeholder=""
|
clearable
|
style="width: 120px"
|
>
|
<el-option
|
v-for="item in edgingTypeList[itme1.process_type]"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</div>
|
<div v-else-if="itme1.input_type=='checkbox'"
|
style="width: 100px;height: 30px;line-height: 30px;">
|
{{itme1.process_name}}：<el-checkbox v-model="dataList.edgingProcess[itme1.process_type]"></el-checkbox>
|
</div>
|
<div v-else-if="itme1.input_type=='input'"
|
style="width: 200px;display: flex;height: 30px;line-height: 30px;">
|
{{itme1.process_name}}：<el-input style="width:100px" v-model.trim="dataList.edgingProcess[itme1.process_type]"></el-input>
|
</div>
|
</template>
|
</div>
|
</div>
|
<br>
|
</template>
|
|
|
<div style="margin-top: 10px">
|
<el-button @click="emitParent()" style="width: 80px;height: 30px" type="primary" size="small">保存</el-button>
|
</div>
|
|
</div>
|
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { useI18n } from 'vue-i18n'
|
import { ref, reactive, onMounted } from 'vue'
|
import {ElMessage} from "element-plus";
|
import request from "@/utils/request"
|
|
const { t } = useI18n()
|
|
|
let props = defineProps({
|
rowIndex:{},
|
edgingTypeList: null
|
})
|
|
let dataCollection=ref()
|
const edgingTypeList = ref({
|
|
})
|
|
const initOrder = async () => {
|
try {
|
// 关键：await 真正等待接口响应，响应完成后再往下执行
|
const res = await request.post("/order/processAttributeConfig");
|
if (res.code === "200") {
|
dataCollection.value = res.data.data || [];
|
|
// 遍历 dataCollection 初始化 dataList 和 edgingTypeList
|
dataCollection.value.forEach(items => {
|
if (!items || !Array.isArray(items.detail) || items.detail.length === 0) {
|
return;
|
}
|
|
// 修正2：dataList 是对象，初始化工艺类型对应的字段（若需要嵌套结构可调整）
|
// 若需 dataList.value[items.process_type] 是对象（存储该工艺类型的所有属性）
|
console.log(dataList.value[items.process_type])
|
console.log(items.process_type)
|
if (!dataList.value[items.process_type]) {
|
dataList.value[items.process_type] = {}; // 初始化对象，而非数组
|
}
|
|
|
|
// 遍历工艺详情
|
items.detail.forEach(item1 => {
|
// 初始化该工艺项的默认值（根据 input_type 调整，这里保持用户原逻辑设为 null）
|
dataList.value[items.process_type][item1.process_type] = null;
|
|
// 处理 select 类型，构建下拉选项
|
if (item1.input_type === 'select') {
|
const baseOptions = props.edgingTypeList[item1.process_type];
|
if (!Array.isArray(baseOptions) || baseOptions.length === 0) {
|
console.warn(`工艺类型 ${item1.process_type} 无基础数据，跳过`);
|
return;
|
}
|
|
// 初始化 edgingTypeList 对应字段为数组
|
if (!Array.isArray(edgingTypeList.value[item1.process_type])) {
|
edgingTypeList.value[item1.process_type] = [];
|
}
|
|
// 下拉选项去重并添加
|
baseOptions.forEach(item => {
|
const newOption = { label: item.basicName, value: item.basicName };
|
const isAlreadyExist = edgingTypeList.value[item1.process_type].some(
|
opt => opt.value === newOption.value
|
);
|
if (!isAlreadyExist) {
|
edgingTypeList.value[item1.process_type].push(newOption);
|
}
|
});
|
}
|
});
|
});
|
|
|
} else {
|
ElMessage.warning(t('basicData.msg.getDataFailed'));
|
dataCollection.value = [];
|
}
|
} catch (err) {
|
ElMessage.error(t('basicData.msg.ServerConnectionError'));
|
router.push("/login");
|
throw err; // 抛出错误，让 onMounted 知道执行失败
|
}
|
};
|
|
onMounted(async () => {
|
|
await initOrder();
|
|
|
const { processAttribute } = props.rowIndex; // 解构赋值，更简洁
|
if (!processAttribute || processAttribute === "") {
|
console.log('processAttribute 为空，跳过赋值');
|
return;
|
}
|
|
// 解析 processAttribute（复用用户原逻辑，优化变量名和代码）
|
let newProcessAttr;
|
if (processAttribute === null || processAttribute === undefined) {
|
newProcessAttr = {};
|
} else if (typeof processAttribute === 'object') {
|
newProcessAttr = processAttribute;
|
} else if (typeof processAttribute === 'string') {
|
try {
|
newProcessAttr = JSON.parse(processAttribute);
|
} catch (error) {
|
console.warn('processAttribute 是字符串但非合法 JSON，已使用默认值：', error.message);
|
newProcessAttr = {};
|
}
|
} else {
|
console.warn('processAttribute 类型不合法，已使用默认值：', typeof processAttribute);
|
newProcessAttr = {};
|
}
|
|
// 遍历解析后的数据，给 dataList 赋值（适配 dataList 的对象结构）
|
Object.entries(newProcessAttr).forEach(([key, value]) => {
|
dataList.value[key] = {};
|
if (typeof value === "object" && value !== null) {
|
Object.entries(value).forEach(([innerKey, innerValue]) => {
|
if (dataList.value[key]) {
|
dataList.value[key][innerKey] = innerValue;
|
}
|
});
|
}
|
});
|
console.log(dataList.value)
|
|
});
|
|
let dataList=ref({})
|
|
|
let emit = defineEmits([
|
'changePage'
|
])
|
const emitParent = () => {
|
if(dataList.value.edgingProcess.edgingType!=null){
|
emit('getEdgingProcess', dataList.value,dataList.value.edgingProcess.edgingType)
|
}else{
|
ElMessage.error(t('请选择磨边类型'))
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
:deep(.el-select .el-input__wrapper) {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
:deep(.el-dialog__body) {
|
padding: 20px;
|
}
|
|
:deep(.el-dialog__footer) {
|
padding: 10px 20px 20px;
|
}
|
</style>
|
