表格嵌套表单
<template>
<div>
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
v-loading="formLoading"
label-width="0px"
:inline-message="true"
>
<el-table :data="formData.tableData" class="my-table" :max-height="tableMaxHeight" stripe border>
<el-table-column width="50" align="center">
<template slot="header">
<i class="el-icon-circle-plus" @click="handleAdd" style="cursor: pointer;"></i>
</template>
<template v-slot="{ $index }">
<el-link @click="handleDelete($index)">
<i class="el-icon-remove"></i>
</el-link>
</template>
</el-table-column>
<el-table-column label="序号" type="index" width="50" align="center"/>
<el-table-column label="数据列名称" min-width="130" align="center">
<template v-slot="{ row, $index }">
<el-form-item :prop="`tableData.${$index}.name`" :rules="formRules.name">
<el-input v-model="row.name" :maxlength="100" />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="列名" min-width="120" align="center">
<template v-slot="{ row, $index }">
<el-form-item :prop="`tableData.${$index}.dbName`" :rules="formRules.dbName">
<el-input v-model="row.dbName" :maxlength="100" @blur="blurHandler(formData.tableData)" @keyup.enter="blurHandler(formData.tableData)"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="数据类型" min-width="100" align="center">
<template v-slot="{ row, $index }">
<el-form-item :prop="`tableData.${$index}.type`" :rules="formRules.type">
<el-select v-model="row.type" clearable>
<el-option v-for="dict in getDictDatas(DICT_TYPE.DATA_TYPE)"
:key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="数据长度" min-width="80" align="center">
<template v-slot="{ row, $index }">
<el-form-item :prop="`tableData.${$index}.len`" :rules="formRules.len">
<el-input v-model="row.len"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="数据列" min-width="90" align="center">
<template v-slot="{ row, $index }">
<el-form-item :prop="`tableData.${$index}.excelColumnIndex`" :rules="formRules.excelColumnIndex">
<el-input-number v-model="row.excelColumnIndex" :min="0" :step="1" controls-position="right"
title="在Excel中处于第几列, 0表示没有" style="width: 100%;"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="分隔符" min-width="60" align="center">
<template v-slot="{ row, $index }">
<el-form-item :prop="`tableData.${$index}.split`" :rules="formRules.split">
<el-input v-model="row.split" :maxlength="10" title="如果使用相同的数据列(0除外)，需要指定分隔符"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="分隔符下标" min-width="90" align="center">
<template v-slot="{ row, $index }">
<el-form-item :prop="`tableData.${$index}.splitIndex`" :rules="formRules.splitIndex">
<el-input-number v-model="row.splitIndex" :min="0" :step="1" controls-position="right"
title="下标从0开始" style="width: 100%;"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="文本列" min-width="90" align="center" v-if="isCreateTemp === 1">
<template v-slot="{ row, $index }">
<el-form-item :prop="`tableData.${$index}.textColumnIndex`" :rules="formRules.textColumnIndex">
<el-input-number v-model="row.textColumnIndex" :min="0" :step="1" controls-position="right"
title="在文本中处于第几列, 0表示没有" style="width: 100%;"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="显示顺序" min-width="90" align="center">
<template v-slot="{ row, $index }">
<el-form-item :prop="`tableData.${$index}.sort`" :rules="formRules.sort">
<el-input-number v-model="row.sort" :min="1" :step="1" controls-position="right"
title="在该表格的显示顺序" style="width: 100%;"/>
</el-form-item>
</template>
</el-table-column>
<!-- 是否作为查询条件 -->
<el-table-column label="条件顺序" min-width="90" align="center">
<template v-slot="{ row, $index }">
<el-form-item :prop="`tableData.${$index}.querySeq`" :rules="formRules.querySeq">
<el-input-number v-model="row.querySeq" :min="1" :step="1" controls-position="right"
title="导入界面，查询条件显示顺序" style="width: 100%;"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="结果顺序" min-width="90" align="center">
<template v-slot="{ row, $index }">
<el-form-item :prop="`tableData.${$index}.resultSeq`" :rules="formRules.resultSeq">
<el-input-number v-model="row.resultSeq" :min="1" :step="1" controls-position="right"
title="导入界面，查询结果显示顺序" style="width: 100%;"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="备注" min-width="200" align="center">
<template v-slot="{ row, $index }">
<el-form-item :prop="`tableData.${$index}.remark`" :rules="formRules.remark">
<el-input type="textarea" v-model="row.remark" placeholder="请输入备注" autosize/>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
<h1>{{calSummData}}</h1>
<!-- 保存按钮 -->
<el-button type="success" @click="saveData">保存</el-button>
</div>
</template>
<script>
// import * as InputApi from '@/api/data/dataInput';
export default {
name: "InputDetailForm",
components: {
},
props: {
// 业务数据定义表id
inputId: Number,
// 是否自动汇总
isAuto: {
type: Number,
default: 0
},
// 是否创建临时表
isCreateTemp: {
type: Number,
default: 0
},
},
data() {
return {
// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
formLoading: false,
// 表单参数
formData: {
tableData: []
},
// 合计计算
calSummData:0,
// 表单校验
formRules: {
// inputId: [{ required: true, message: "业务数据定义表id不能为空", trigger: "blur" }],
name: [{ required: true, message: "数据列名称不能为空", trigger: "blur" }],
dbName: [{ required: true, message: "列名不能为空", trigger: "blur" }],
type: [{ required: true, message: "数据类型不能为空", trigger: "change" }],
len: [
{ required: true, message: "数据长度不能为空", trigger: "blur" },
{ pattern: /^(0|[1-9]\d*)(,(0|[1-9]\d*))?$/, message: "数据长度的格式不正确", trigger: "blur" }
],
excelColumnIndex: [{ required: true, message: "数据列不能为空", trigger: "blur" }],
textColumnIndex: [{ required: true, message: "文本列不能为空", trigger: "blur" }],
sort: [{ required: true, message: "显示顺序不能为空", trigger: "blur" }],
},
// table最大高度
tableMaxHeight: 0
};
},
watch:{/** 监听主表的关联字段的变化，加载对应的子表数据 */
inputId:{
handler(val) {
// 重置表单
this.reset();
// val 非空，则加载数据
if (!val) {
return;
}
try {
this.formLoading = true;
const that = this;
that.formData.tableData = [];
// InputApi.getInputDetailListByInputId(val).then((res) => {
// that.formData.tableData = res.data;
// })
} finally {
this.formLoading = false;
}
},
immediate: true
}
},
created() {
this.updateTableMaxHeight();
window.addEventListener('resize', this.updateTableMaxHeight); // 监听窗口大小变化
},
beforeDestroy() {
console.log("beforeDestroy");
window.removeEventListener('resize', this.updateTableMaxHeight);
},
methods: {
// 改变table的最大高度
updateTableMaxHeight() {
const viewportHeight = window.innerHeight;
let tableMaxHeight = viewportHeight - 160;
this.tableMaxHeight = tableMaxHeight > 400 ? tableMaxHeight : 400;
// console.log(viewportHeight, tableMaxHeight, this.tableMaxHeight);
},
// 表单重置
reset() {
this.formData.tableData = [];
},
/** 新增按钮操作 */
handleAdd() {
const row = {
id: undefined,
inputId: undefined,
name: undefined,
dbName: undefined,
type: undefined,
isFixed: undefined,
dbType: undefined,
len: undefined,
excelColumnIndex: undefined,
groupStr: undefined,
split: undefined,
splitIndex: undefined,
textColumnIndex: undefined,
sort: undefined,
querySeq: undefined,
resultSeq: undefined,
}
row.inputId = this.inputId;
this.formData.tableData.push(row);
},
/** 删除按钮操作 */
handleDelete(index) {
this.formData.tableData.splice(index, 1);
},
// 保存数据
saveData() {
// 模拟保存到数据库
console.log('保存的数据：', JSON.stringify(this.formData));
},
/** 表单校验 */
validate() {
return this.$refs["formRef"].validate();
},
/** 表单值 */
getData() {
return this.formData.tableData;
},
// 失去焦点或按下 Enter 键时保存编辑
blurHandler(array) {
this.calSummData = this.calSumm(array);
},
calSumm(array){
let total = array.reduce((accumulator, currentValue) => {
return accumulator + Number(currentValue.dbName);
}, 0);
console.log("total====",total);
return total
}
}
};
</script>
<style lang="scss" scoped>
.my-table .el-table__body-wrapper tbody tr .el-form-item {
margin-bottom: 0px;
}
::v-deep .my-table .cell {
padding-left: 4px !important;
padding-right: 4px !important;
}
</style>
尽量的奔跑
浙公网安备 33010602011771号