element ui form表单 表格下嵌套动态表格，新增行，删除行
<template>
<el-dialog
:modal-append-to-body="false"
:append-to-body="true"
:title="title"
:visible.sync="addRequireVisible"
width="1300px"
show-close
>
<el-form :rules="requireRuleForm" ref="requireRef" :model="requireForm" label-width="180px">
<el-row>
<el-col :span="12">
<el-form-item label="模型编码：" prop="modelId">
<el-input style="width: 100%" v-model="requireForm.modelId" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="模型名称：" prop="modelName">
<el-input style="width: 100%" v-model="requireForm.modelName" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="口径：" prop="koujing">
<el-input
:clearable="true"
@input="forceUpdate($event)"
style="width: 100%"
v-model="requireForm.koujing"
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="风险点：" prop="fengxiandian">
<el-input
:clearable="true"
@input="forceUpdate($event)"
style="width: 100%"
v-model="requireForm.fengxiandian"
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="数据周期：" prop="dataCycle">
<el-select
:clearable="true"
@change="forceUpdate($event)"
style="width: 100%"
v-model="requireForm.dataCycle"
placeholder="请选择"
>
<el-option v-for="(el, i) in dataCycleOpt" :key="i" :value="el.value" :label="el.name" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="模型所需工作量" prop="gongzuoliang">
<el-input
:clearable="true"
@input="forceUpdate($event)"
style="width: 90%"
v-model="requireForm.gongzuoliang"
placeholder="请输入"
/>
<span style="margin-left: 6px">人日</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="模型负责人：" prop="fuzeren">
<el-select
:clearable="true"
@change="forceUpdate($event)"
style="width: 100%"
v-model="requireForm.fuzeren"
placeholder="请选择"
>
<el-option v-for="(el, i) in fuzerenOpt" :key="i" :value="el.value" :label="el.name" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="审批人：" prop="shenpiren">
<el-select
:clearable="true"
@change="forceUpdate($event)"
style="width: 100%"
v-model="requireForm.shenpiren"
placeholder="请选择"
>
<el-option v-for="(el, i) in shenpirenOpt" :key="i" :value="el.value" :label="el.name" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="结果表名称：" prop="resultTableName">
<el-input
:clearable="true"
@input="forceUpdate($event)"
:autosize="{ minRows: 2, maxRows: 2 }"
type="textarea"
style="width: 100%"
v-model="requireForm.resultTableName"
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="结果表字段：" prop="resultTableColumn">
<el-input
:clearable="true"
@input="forceUpdate($event)"
:autosize="{ minRows: 2, maxRows: 2 }"
type="textarea"
style="width: 100%"
v-model="requireForm.resultTableColumn"
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="数据开发人员：" prop="dataDeveloper">
<el-select
:clearable="true"
@change="forceUpdate($event)"
style="width: 100%"
v-model="requireForm.dataDeveloper"
placeholder="请选择"
>
<el-option v-for="(el, i) in dataDeveloperOpt" :key="i" :value="el.value" :label="el.name" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否涉及接口表：" prop="IsJiekouTable">
<el-radio-group v-model="requireForm.IsJiekouTable">
<el-radio label="0">涉及</el-radio>
<el-radio label="1">不涉及</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24" v-if="requireForm.IsJiekouTable == 0">
<el-form-item label="涉及接口表信息：" prop="interfaceTableInfo">
<el-form :model="formData" ref="data" label-width="auto">
<el-table
border
:header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }"
:data="formData.tableData"
ref="table"
style="width: 100%"
>
<el-table-column align="center" prop="sourceSysName" label="来源系统名">
<template slot-scope="scope">
<!--表格里面嵌套表单-->
<el-form-item
:prop="scope.$index + '.sourceSysName'"
:rules="{ required: true, message: '来源系统名不能为空', trigger: 'blur' }"
>
<el-select
:clearable="true"
@change="forceUpdate($event)"
style="width: 100%"
v-model="scope.row.sourceSysName"
placeholder="请选择"
>
<el-option v-for="(el, i) in sourceSysNameOpt" :key="i" :value="el.value" :label="el.name" />
</el-select>
</el-form-item>
</template> </el-table-column
>
<el-table-column align="center" prop="dataTabName" label="数据表名">
<template slot-scope="scope">
<!--表格里面嵌套表单-->
<el-form-item
:prop="scope.$index + '.dataTabName'"
:rules="{ required: true, message: '数据表名不能为空', trigger: 'blur' }"
>
<el-input
v-model="scope.row.dataTabName"
autocomplete="off"
:autosize="{ minRows: 2, maxRows: 2 }"
type="textarea"
size="small"
placeholder="数据表名"
></el-input>
</el-form-item>
</template> </el-table-column
>
<el-table-column align="center" prop="dataTransferCycle" label="数据传输周期">
<template slot-scope="scope">
<!--表格里面嵌套表单-->
<el-form-item
:prop="scope.$index + '.dataTransferCycle'"
:rules="{ required: true, message: '数据传输周期不能为空', trigger: 'blur' }"
>
<el-select
:clearable="true"
@change="forceUpdate($event)"
style="width: 100%"
v-model="scope.row.dataTransferCycle"
placeholder="请选择"
>
<el-option
v-for="(el, i) in dataTransferCycleOpt"
:key="i"
:value="el.value"
:label="el.name"
/>
</el-select>
</el-form-item>
</template> </el-table-column
>
<el-table-column align="center" prop="sysAdmin" label="系统管理员">
<template slot-scope="scope">
<!--表格里面嵌套表单-->
<el-form-item
:prop="scope.$index + '.sysAdmin'"
:rules="{ required: true, message: '系统管理员不能为空', trigger: 'blur' }"
>
<el-input
v-model="scope.row.sysAdmin"
autocomplete="off"
:autosize="{ minRows: 2, maxRows: 2 }"
type="textarea"
size="small"
placeholder="系统管理员"
></el-input>
</el-form-item>
</template> </el-table-column
>
<el-table-column align="center" prop="jishuyuan" label="技术员">
<template slot-scope="scope">
<!--表格里面嵌套表单-->
<el-form-item
:prop="scope.$index + '.jishuyuan'"
:rules="{ required: true, message: '技术员不能为空', trigger: 'blur' }"
>
<el-input
v-model="scope.row.jishuyuan"
autocomplete="off"
:autosize="{ minRows: 2, maxRows: 2 }"
type="textarea"
size="small"
placeholder="技术员"
></el-input>
</el-form-item>
</template> </el-table-column
>
<el-table-column align="center" prop="laiyuanshujukoujing" label="来源数据口径">
<template slot-scope="scope">
<!--表格里面嵌套表单-->
<el-form-item
:prop="scope.$index + '.laiyuanshujukoujing'"
:rules="{ required: true, message: '来源数据口径不能为空', trigger: 'blur' }"
>
<el-input
v-model="scope.row.laiyuanshujukoujing"
autocomplete="off"
:autosize="{ minRows: 2, maxRows: 2 }"
type="textarea"
size="small"
placeholder="技术员"
></el-input>
</el-form-item>
</template> </el-table-column
>
<el-table-column label="操作" resizable align="center" header-align="center" width="80">
<template slot-scope="{ $index }">
<el-button
type="primary"
icon="el-icon-plus"
circle
@click="addRow()"
v-if="$index == 0"
></el-button>
<el-button icon="el-icon-minus" circle @click="delRow($index)" v-if="$index > 0"></el-button>
</template>
</el-table-column>
</el-table>
</el-form>
<i
class="el-icon-circle-plus-outline"
style="font-size: 20px; color: #1890ff; margin-top: 10px"
@click="addRow"
></i>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="附件上传：" prop="fujian">
<el-upload
action
:on-change="onChange"
:on-remove="handleRemove"
:file-list="requireForm.fileList"
:auto-upload="false"
v-if="!isSee"
>
<el-button plain size="small" type="primary">点击上传</el-button>
<span style="margin-left: 6px">只能上传docx/xlsx文件，且不超过1000kb</span>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer">
<el-button @click="addRequireVisible = false">取 消</el-button>
<el-button type="primary" @click="onSubmit" :loading="confirmLoading">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import { addProjectProblems, getCategoryListByCodes, updateProjectProblems } from '@/api/projectManage.js'
import moment from 'moment'
export default {
name: 'AddRequire',
components: {},
data() {
let validateMoney = (rule, value, callback) => {
if (0 != Number(value) && !Number(value)) {
return callback(new Error(rule.message))
} else {
callback()
}
}
return {
riskLevelOpt: [],
rectWayOpt: [],
requireRuleForm: {
requireName: [{ required: true, message: '请输入需求名称' }],
modelName: [{ required: true, message: '请输入模型名称' }],
koujing: [{ required: true, message: '请输入口径' }],
fengxiandian: [{ required: true, message: '请输入风险点' }],
dataCycle: [{ required: true, message: '请选择数据周期' }],
gongzuoliang: [{ required: true, message: '请输入模型所需工作量' }],
fuzeren: [{ required: true, message: '请输入模型负责人' }],
shenpiren: [{ required: true, message: '请输入审批人' }],
resultTableName: [{ required: true, message: '请输入结果表名称' }],
resultTableColumn: [{ required: true, message: '请输入结果名字段' }],
dataDeveloper: [{ required: true, message: '请选择数据开发人员' }],
IsJiekouTable: [{ required: true, message: '请选择是否涉及接口表' }],
},
requireForm: {
requireId: '',
requireName: '',
modelId: '',
modelName: '',
koujing: '',
fengxiandian: '',
dataCycle: undefined,
fuzeren: undefined,
shenpiren: '',
resultTableName: '',
resultTableColumn: '',
dataDeveloper: '',
IsJiekouTable: 1,
fileList: [],
},
interfaceTableInfo: [],
title: '新增需求',
addRequireVisible: false,
isEdit: false,
confirmLoading: false,
dataDeveloperOpt: [
{
name: '张三',
value: 1,
},
{
name: '李四',
value: 2,
},
{
name: '王五',
value: 3,
},
],
dataCycleOpt: [
{
name: '日',
value: 11,
},
{
name: '周',
value: 12,
},
{
name: '半年',
value: 13,
},
{
name: '年',
value: 14,
},
],
fuzerenOpt: [
{
name: '张三',
value: 1,
},
{
name: '李四',
value: 2,
},
{
name: '王五',
value: 3,
},
],
shenpirenOpt: [
{
name: '张三',
value: 1,
},
{
name: '李四',
value: 2,
},
{
name: '王五',
value: 3,
},
],
sourceSysNameOpt: [
{
name: '划小系统',
value: 1,
},
{
name: '沙盘系统',
value: 2,
},
],
dataTransferCycleOpt: [
{
name: '每小时',
value: 1,
},
{
name: '每天',
value: 2,
},
{
name: '每周',
value: 2,
},
],
isSee: false,
formData: {
tableData: [
{
sourceSysName: '',
dataTabName: '',
},
],
},
}
},
mounted() {
// 风险程度
getCategoryListByCodes({ categoryCodes: 'zgxh_risk_level' }).then((res) => {
this.riskLevelOpt = (res.result.zgxhRiskLevel || []).map((item) => ({
...item,
value: item.codeLowercase,
name: item.nameLowercase,
}))
})
// 整改方式
getCategoryListByCodes({ categoryCodes: 'zgxh_rect_way' }).then((res) => {
this.rectWayOpt = (res.result.zgxhRectWay || []).map((item) => ({
...item,
value: item.codeLowercase,
name: item.nameLowercase,
}))
})
},
methods: {
forceUpdate(e) {
this.$forceUpdate()
},
showInit(row) {
if (row.requireId) {
this.isEdit = true
this.title = '编辑需求'
this.requireForm = {
requireId: row.required,
requireName: row.requireName,
modelId: row.modelId,
modelName: row.modelName,
koujing: row.koujing,
fengxiandian: row.fengxiandian,
dataCycle: row.dataCycle,
fuzeren: row.fuzeren,
gongzuoliang: row.gongzuoliang,
shenpiren: row.shenpiren,
resultTableName: row.resultTableName,
resultTableColumn: row.resultTableColumn,
dataDeveloper: row.dataDeveloper,
IsJiekouTable: 1,
}
} else {
this.isEdit = false
this.title = '新增需求'
this.$nextTick(() => {
this.requireForm = {
// requireId: 'DM231572',
// requireName: '',
// modelId: 'MD05612',
// modelName: '',
// koujing: '',
// fengxiandian: '',
// dataCycle: '',
// fuzeren: '',
// gongzuoliang: '',
// shenpiren: '',
// resultTableName: '',
// resultTableColumn: '',
// dataDeveloper: '',
// IsJiekouTable: null,
}
// this.$refs.requireRef.resetFields()
})
}
this.addRequireVisible = true
},
addRow() {
let newArr = [
{
sourceSysName: '',
dataTabName: '',
dataTransferCycle: '',
sysAdmin: '',
jishuyuan: '',
laiyuanshujukoujing: '',
},
]
this.formData.tableData.push(...newArr)
},
delRow(index) {
this.formData.tableData.splice(index, 1)
},
handleRemove(file) {
const index = this.requireForm.fileList.indexOf(file)
const newFileList = this.requireForm.fileList.slice()
newFileList.splice(index, 1)
this.requireForm.fileList = newFileList
},
onChange(file) {
console.log(this.requireForm.fileList)
this.requireForm.fileList.push(file)
},
onSubmit() {
this.$refs.requireRef.validate((valid) => {
if (valid) {
this.confirmLoading = true
if (!this.isEdit) {
addProjectProblems({ ...this.requireForm }).then((res) => {
if (res.success) {
this.$message.success('操作成功')
this.addRequireVisible = false
this.$emit('refreshList')
} else {
this.$message.error(res.message)
}
this.confirmLoading = false
})
} else {
updateProjectProblems({ ...this.requireForm }).then((res) => {
if (res.success) {
this.$message.success('操作成功')
this.addRequireVisible = false
this.$emit('refreshList')
} else {
this.$message.error(res.message)
}
this.confirmLoading = false
})
}
} else {
return false
}
})
},
},
}
</script>
<style lang="less">
@import '~@assets/less/common.less';
</style>
<style scoped lang="less">
/deep/.el-form-item--mini.el-form-item {
margin-bottom: 20px;
}
/deep/.el-dialog__body {
padding-right: 40px;
}
/deep/ .el-dialog {
max-height: unset;
}
</style>
