feat(TensionTable): 为钢种字段添加下拉选择框
添加钢种下拉选择功能,替换原有的输入框。引入钢种列表API并实现数据获取,提升用户体验和数据准确性。
This commit is contained in:
@@ -5,11 +5,21 @@
|
|||||||
<el-form :inline="true" size="mini" class="query-form" @submit.native.prevent>
|
<el-form :inline="true" size="mini" class="query-form" @submit.native.prevent>
|
||||||
<el-form-item v-for="k in acceptKeys" :key="k" :label="getLabel(k)">
|
<el-form-item v-for="k in acceptKeys" :key="k" :label="getLabel(k)">
|
||||||
<el-input
|
<el-input
|
||||||
|
v-if="k !== 'steelGrade'"
|
||||||
v-model="queryParams[k]"
|
v-model="queryParams[k]"
|
||||||
clearable
|
clearable
|
||||||
:placeholder="`请输入${getLabel(k)}`"
|
:placeholder="`请输入${getLabel(k)}`"
|
||||||
@keyup.enter.native="handleQuery"
|
@keyup.enter.native="handleQuery"
|
||||||
/>
|
/>
|
||||||
|
<el-select
|
||||||
|
v-else
|
||||||
|
v-model="queryParams[k]"
|
||||||
|
clearable
|
||||||
|
:placeholder="`请选择${getLabel(k)}`"
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
>
|
||||||
|
<el-option v-for="item in steelGradeList" :key="item.gradeid" :label="item.name" :value="item.name" />
|
||||||
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
|
||||||
@@ -62,7 +72,10 @@
|
|||||||
<el-row :gutter="12">
|
<el-row :gutter="12">
|
||||||
<el-col :span="12" v-for="col in schema" :key="'f-' + col.prop">
|
<el-col :span="12" v-for="col in schema" :key="'f-' + col.prop">
|
||||||
<el-form-item :label="col.label" :prop="col.prop">
|
<el-form-item :label="col.label" :prop="col.prop">
|
||||||
<el-input v-model="form[col.prop]" :disabled="isEdit && acceptKeys.includes(col.prop)" />
|
<el-input v-if="col.prop !== 'steelGrade'" v-model="form[col.prop]" :disabled="isEdit && acceptKeys.includes(col.prop)" />
|
||||||
|
<el-select v-else v-model="form[col.prop]" :disabled="isEdit && acceptKeys.includes(col.prop)" placeholder="请选择钢种">
|
||||||
|
<el-option v-for="item in steelGradeList" :key="item.gradeid" :label="item.name" :value="item.name" />
|
||||||
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@@ -76,6 +89,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { getSteelGradeList, addSteelGrade, updateSteelGrade, deleteSteelGrade, getSteelGradeInfo } from '@/api/l2/steelGrade'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'TensionTable',
|
name: 'TensionTable',
|
||||||
props: {
|
props: {
|
||||||
@@ -109,14 +124,21 @@ export default {
|
|||||||
isEdit: false,
|
isEdit: false,
|
||||||
form: fm,
|
form: fm,
|
||||||
rules: {},
|
rules: {},
|
||||||
submitLoading: false
|
submitLoading: false,
|
||||||
|
steelGradeList: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.buildRules()
|
this.buildRules()
|
||||||
this.getList()
|
this.getList()
|
||||||
|
this.fetchSteelGradeList()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
fetchSteelGradeList() {
|
||||||
|
getSteelGradeList().then(res => {
|
||||||
|
this.steelGradeList = res.rows || res.data || []
|
||||||
|
})
|
||||||
|
},
|
||||||
getLabel(prop) {
|
getLabel(prop) {
|
||||||
return (this.schema.find(s => s.prop === prop) || {}).label || prop
|
return (this.schema.find(s => s.prop === prop) || {}).label || prop
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user