<template>
<div style="background:white;">
<el-table
:data="yawTable"
border
size="small"
style="width: 100%"
height="235"
:row-class-name="tableRowClassName"
>
<el-table-column prop="yaw_index" label="偏航次数" width="70"> </el-table-column>
<el-table-column prop="point_id" label="偏航点序号" width="100"> </el-table-column>
<el-table-column prop="yaw_point_index" label="偏航真值点位序号" width="220">
<template slot-scope="scope">
<el-form :ref="'ruleForm' + scope.row.yaw_index" :model="scope.row" :rules="rules">
<el-form-item prop="yaw_point_index">
<el-input v-model="scope.row.yaw_point_index" size="small"></el-input>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="操作" width="70">
<template slot-scope="scope">
<el-button
type="text"
size="small"
:disabled="scope.$index === currentYawIndex"
@click="examine(scope)"
>查看</el-button
>
</template>
</el-table-column>
</el-table>
<div style="text-align:center;padding:10px 0;">
<el-button type="primary" size="small" @click="preserve">保存</el-button>
</div>
</div>
</template>
<script>
import Vue from 'vue'
const validateYawPoint = (rule, value, callback) => {
// value.split(/[\n\s+,,]/g) //全局切换含有逗号(中/英)字符串(可自行选择)
let getLocation = value.split(/[\n\s+,]/g)
if (!value) {
return callback(new Error('请输入偏航真值点位序号!'))
}
for (let item of getLocation) {
if (!(item.split('-').length > 1) && !Number(item)) {
return callback(new Error("多个点以英文','分隔,或'-'表示范围"))
} else if (item.split('-').length > 1) {
let lr = item.split('-')
for (let i of lr) {
if (!Number(i)) {
return callback(new Error("多个点以英文','分隔,或'-'表示范围"))
}
}
}
}
return callback()
}
export default Vue.extend({
name: 'YawPanel',
data() {
return {
// input框失焦校验
rules: {
yaw_point_index: [{ validator: validateYawPoint, trigger: 'blur' }],
},
yawTable:[{
point_id:'1121211',
yaw_point_index:'',
annotator:'wgng',
yaw_index:'1',
yaw_route:''
},{
point_id:'1121211',
yaw_point_index:'',
annotator:'wwang',
yaw_index:'2',
yaw_route:''
},{
point_id:'11211',
yaw_point_index:'',
annotator:'wang',
yaw_index:'3',
yaw_route:''
},{
point_id:'数据',
yaw_point_index:'',
annotator:'angpe',
yaw_index:'4',
yaw_route:''
},{
point_id:'1121211',
yaw_point_index:'',
annotator:'wb15',
yaw_index:'5',
yaw_route:''
},],
traceId:'qw_20120913_1233243r5_23454322312',
currentYawIndex:0,
}
},
methods: {
tableRowClassName({ row, rowIndex }) {
return rowIndex === this.currentYawIndex ? 'checked-row' : ''
},
// 查看
examine({ $index }) {
this.currentYawIndex = $index
},
// 保存
async preserve() {
// 获取到的ref进行循环
let isShow = []
for (let item in this.$refs) {
this.$refs[item].validate(valid => {
if (!valid) return false
isShow.push(true)
})
}
//此处进行最终校验
if (isShow.length === Object.keys(this.$refs).length && isShow.every(item => item)) {
let result = await this.$http.get(`/saml/List`, { num:1 }).catch(e => {throw e})
}
},
},
})
</script>
<style lang="scss" scoped>
::v-deep .el-table .checked-row {
background: #dcdfe6;
}
</style>
效果展示