|
@@ -27,9 +27,10 @@
|
|
v-for="(item, index) in paramList"
|
|
v-for="(item, index) in paramList"
|
|
:key="index"
|
|
:key="index"
|
|
:class="{ active: activeIndex === index }"
|
|
:class="{ active: activeIndex === index }"
|
|
- @click="handleSelect(index)"
|
|
|
|
|
|
+ @click="handleSelect(index, item)"
|
|
|
|
+
|
|
>
|
|
>
|
|
- {{ item }}
|
|
|
|
|
|
+ {{ item.paramName }}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -65,22 +66,21 @@
|
|
<div class="condition-list">
|
|
<div class="condition-list">
|
|
<div class="condition-item1">
|
|
<div class="condition-item1">
|
|
<div
|
|
<div
|
|
- v-for="(item, index) in conditionList"
|
|
|
|
|
|
+ v-for="(item, index) in paramList[activeIndex].codeList"
|
|
:key="index"
|
|
:key="index"
|
|
- :class="{ active: activeIndex === index }"
|
|
|
|
- @click="handleSelect(index)"
|
|
|
|
|
|
+
|
|
>
|
|
>
|
|
<div>
|
|
<div>
|
|
<span>
|
|
<span>
|
|
<div class="condition-header-content">
|
|
<div class="condition-header-content">
|
|
<div style="color: black;">
|
|
<div style="color: black;">
|
|
- {{item.name}}
|
|
|
|
|
|
+ {{item.codeName}}
|
|
</div>
|
|
</div>
|
|
<i class="el-icon-close" @click.stop="handleDeleteItem(index)"></i>
|
|
<i class="el-icon-close" @click.stop="handleDeleteItem(index)"></i>
|
|
</div>
|
|
</div>
|
|
<div class="code-list">
|
|
<div class="code-list">
|
|
- <div v-for="(item1,index) in item.value" :key="index" class="code-item">
|
|
|
|
- {{ item1 }}
|
|
|
|
|
|
+ <div v-for="(item1,index) in item.codeValue" :key="index" class="code-item">
|
|
|
|
+ {{ item1.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
</span>
|
|
@@ -112,17 +112,17 @@
|
|
</div>
|
|
</div>
|
|
<el-form ref="addForm" :model="addForm" label-width="80px">
|
|
<el-form ref="addForm" :model="addForm" label-width="80px">
|
|
<el-form-item label="样品信息">
|
|
<el-form-item label="样品信息">
|
|
- <el-select v-model="addForm.sampleInfo" placeholder="请选择">
|
|
|
|
|
|
+ <el-select v-model="addForm.codeNameId" placeholder="请选择" style="width: 100%;" @change="handleSelectCodeName">
|
|
<el-option
|
|
<el-option
|
|
v-for="item in sampleOptions"
|
|
v-for="item in sampleOptions"
|
|
:key="item.value"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:label="item.label"
|
|
- :value="item.value">
|
|
|
|
|
|
+ :value="item.label">
|
|
</el-option>
|
|
</el-option>
|
|
</el-select>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="基础信息">
|
|
<el-form-item label="基础信息">
|
|
- <el-select v-model="addForm.basicInfo" placeholder="请选择">
|
|
|
|
|
|
+ <el-select v-model="addForm.codeValue" placeholder="请选择" multiple style="width: 100%;" @change="handleSelectCode">
|
|
<el-option
|
|
<el-option
|
|
v-for="item in basicOptions"
|
|
v-for="item in basicOptions"
|
|
:key="item.value"
|
|
:key="item.value"
|
|
@@ -133,8 +133,9 @@
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<div slot="footer" class="dialog-footer">
|
|
- <el-button @click="addDialogVisible = false">取 消</el-button>
|
|
|
|
- <el-button type="primary" @click="confirmAdd">确认添加</el-button>
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <el-button type="primary" @click="confirmAdd" :style="{ background: 'rgb(37, 80, 162)', borderColor: 'rgb(37, 80, 162)' }">确认添加</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
@@ -148,7 +149,18 @@ export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
visible: true,
|
|
visible: true,
|
|
- paramList: ['<0.75', '<1.5'] , // 参数列表数据
|
|
|
|
|
|
+ paramList: [
|
|
|
|
+ {
|
|
|
|
+ paramName: '<0.75',
|
|
|
|
+ codeList:[
|
|
|
|
+ {codeName: 'C3A', codeValue: [
|
|
|
|
+ {name:'矿渣硅酸盐水泥',value:'1'}
|
|
|
|
+ ]},
|
|
|
|
+ {codeName: 'C3S', codeValue: []},
|
|
|
|
+ ]
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ ] , // 参数列表数据
|
|
activeIndex: 0, // 当前选中的参数索引
|
|
activeIndex: 0, // 当前选中的参数索引
|
|
conditionList:[
|
|
conditionList:[
|
|
{name:'1111',value:[222,333,444]},
|
|
{name:'1111',value:[222,333,444]},
|
|
@@ -156,15 +168,19 @@ export default {
|
|
],
|
|
],
|
|
addDialogVisible: false,
|
|
addDialogVisible: false,
|
|
addForm: {
|
|
addForm: {
|
|
- sampleInfo: '',
|
|
|
|
- basicInfo: ''
|
|
|
|
|
|
+ codeName: '',
|
|
|
|
+ codeValue: [],
|
|
|
|
+ codeValueName: '',
|
|
|
|
+ codeNameId: ''
|
|
},
|
|
},
|
|
sampleOptions: [
|
|
sampleOptions: [
|
|
{ value: '1', label: '试验值水泥' }
|
|
{ value: '1', label: '试验值水泥' }
|
|
// 添加更多选项...
|
|
// 添加更多选项...
|
|
],
|
|
],
|
|
basicOptions: [
|
|
basicOptions: [
|
|
- { value: '1', label: 'P.I' }
|
|
|
|
|
|
+ { value: '1', label: '矿渣硅酸盐水泥' },
|
|
|
|
+ { value: '2', label: '普通酸盐水泥' },
|
|
|
|
+ { value: '3', label: '普通酸盐水泥' },
|
|
// 添加更多选项...
|
|
// 添加更多选项...
|
|
],
|
|
],
|
|
|
|
|
|
@@ -195,18 +211,49 @@ export default {
|
|
handleSelect(index) {
|
|
handleSelect(index) {
|
|
this.activeIndex = index
|
|
this.activeIndex = index
|
|
},
|
|
},
|
|
|
|
+ handleSelectCode(value) {
|
|
|
|
+ if( !value || value.length === 0) {
|
|
|
|
+ this.addForm.codeValueName = '';
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ if (!values || values.length === 0) {
|
|
|
|
+ this.addForm.codeValueName = '';
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 根据选中的value值找到对应的label
|
|
|
|
+ const selectedLabels = values.map(value => {
|
|
|
|
+ const option = this.basicOptions.find(opt => opt.value === value);
|
|
|
|
+ return option ? option.label : '';
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ this.addForm.codeValueName = selectedLabels.join(', ');
|
|
|
|
+ },
|
|
|
|
+ handleSelectCodeName(value) {
|
|
|
|
+ if (!value) {
|
|
|
|
+ this.addForm.codeName = [];
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ this.sampleOptions.forEach(option => {
|
|
|
|
+ if (option.label === value) {
|
|
|
|
+ this.addForm.codeNameId = option.value;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
handleDeleteItem(){
|
|
handleDeleteItem(){
|
|
|
|
|
|
},
|
|
},
|
|
confirmAdd() {
|
|
confirmAdd() {
|
|
- this.conditionList.push({
|
|
|
|
- name: this.addForm.sampleInfo,
|
|
|
|
- value: [this.addForm.basicInfo]
|
|
|
|
- })
|
|
|
|
|
|
+ this.paramList[this.activeIndex].codeList.push(
|
|
|
|
+ {codeName: this.addForm.codeName,
|
|
|
|
+ codeValue: [
|
|
|
|
+ {name:this.addForm.codeValueName,value:this.addForm.codeValue}
|
|
|
|
+ ]},
|
|
|
|
+ )
|
|
this.addDialogVisible = false
|
|
this.addDialogVisible = false
|
|
this.addForm = {
|
|
this.addForm = {
|
|
- sampleInfo: '',
|
|
|
|
- basicInfo: ''
|
|
|
|
|
|
+ codeName: '',
|
|
|
|
+ codeValue: []
|
|
}
|
|
}
|
|
this.$message.success('添加成功')
|
|
this.$message.success('添加成功')
|
|
}
|
|
}
|
|
@@ -297,6 +344,7 @@ export default {
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
color:white ;
|
|
color:white ;
|
|
padding: 10px;
|
|
padding: 10px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
|
.marginTop-20{
|
|
.marginTop-20{
|
|
margin-top: 10px;
|
|
margin-top: 10px;
|
|
@@ -304,7 +352,7 @@ export default {
|
|
background: rgb(37, 80, 162);
|
|
background: rgb(37, 80, 162);
|
|
.el-dialog__header{
|
|
.el-dialog__header{
|
|
padding: 0px;
|
|
padding: 0px;
|
|
- font-size: 14px;
|
|
|
|
|
|
+
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -348,9 +396,11 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
.condition-item1 {
|
|
.condition-item1 {
|
|
|
|
+ display: flex;
|
|
span {
|
|
span {
|
|
|
|
+ margin-left: 5px;
|
|
display: inline-block;
|
|
display: inline-block;
|
|
- padding: 4px 4px;
|
|
|
|
|
|
+ padding: 8px 8px;
|
|
|
|
|
|
|
|
|
|
background: rgb(213, 222, 255);;
|
|
background: rgb(213, 222, 255);;
|
|
@@ -358,6 +408,7 @@ export default {
|
|
border-radius: 4px;
|
|
border-radius: 4px;
|
|
cursor: pointer; // 添加指针样式
|
|
cursor: pointer; // 添加指针样式
|
|
transition: all 0.3s; // 添加过渡效果
|
|
transition: all 0.3s; // 添加过渡效果
|
|
|
|
+ height: 40px;
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|