feat(TensionTable): 为钢种字段添加下拉选择框

添加钢种下拉选择功能,替换原有的输入框。引入钢种列表API并实现数据获取,提升用户体验和数据准确性。
This commit is contained in:
砂糖
2026-01-08 09:35:47 +08:00
parent 8c58a93e67
commit 8ff6390613

View File

@@ -5,11 +5,21 @@
<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-input
v-if="k !== 'steelGrade'"
v-model="queryParams[k]"
clearable
:placeholder="`请输入${getLabel(k)}`"
@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-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
@@ -62,7 +72,10 @@
<el-row :gutter="12">
<el-col :span="12" v-for="col in schema" :key="'f-' + 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-col>
</el-row>
@@ -76,6 +89,8 @@
</template>
<script>
import { getSteelGradeList, addSteelGrade, updateSteelGrade, deleteSteelGrade, getSteelGradeInfo } from '@/api/l2/steelGrade'
export default {
name: 'TensionTable',
props: {
@@ -109,14 +124,21 @@ export default {
isEdit: false,
form: fm,
rules: {},
submitLoading: false
submitLoading: false,
steelGradeList: []
}
},
created() {
this.buildRules()
this.getList()
this.fetchSteelGradeList()
},
methods: {
fetchSteelGradeList() {
getSteelGradeList().then(res => {
this.steelGradeList = res.rows || res.data || []
})
},
getLabel(prop) {
return (this.schema.find(s => s.prop === prop) || {}).label || prop
},