<!-- 子组件 -->
<template>
<el-form ref="formChild" :model="form" :disabled="isDisabled">
<el-table ref="table" :data="form.contents" size="mini" border>
<el-table-column prop="equipmentName" label="设备名称" align="center" :show-overflow-tooltip="true">
<template slot-scope="{row, $index}">
<el-form-item :prop="'contents.' + $index + '.equipmentName'" :rules="[{ required: true, message: '设备名称不能为空' }]" size="mini">
<el-input v-model="row.equipmentName" placeholder="设备名称" />
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="purchaseQuantity" label="采购数量" align="center" :show-overflow-tooltip="true">
<template slot-scope="{row, $index}">
<el-form-item :prop="'contents.' + $index + '.purchaseQuantity'" :rules="[{ required: true, message: '采购数量不能为空' }]" size="mini">
<el-input-number v-model="row.purchaseQuantity" controls-position="right" :precision="0" :min="1" placeholder="采购数量" />
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="equipmentUnit" label="单位" align="center" :show-overflow-tooltip="true">
<template slot-scope="{row, $index}">
<el-form-item :prop="'contents.' + $index + '.equipmentUnit'" :rules="[{ required: true, message: '单位不能为空' }]" size="mini">
<el-input v-model="row.equipmentUnit" placeholder="单位" />
</el-form-item>
</template>
</el-table-column>
<el-table-column v-if="!isDisabled" label="操作" align="center" class-name="small-padding fixed-width" width="50">
<template slot-scope="{$index}">
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete($index)" />
</template>
</el-table-column>
</el-table>
<el-button v-if="!isDisabled" plain class="addBtn" icon="el-icon-plus" @click="handleAdd">添加一行数据</el-button>
</el-form>
</template>
<script>
export default {
name: 'ProjectContent',
props: {
data: {
type: Array,
default: () => []
},
isDisabled: {
type: Boolean,
default: false
}
},
data() {
return {
form: {
contents: []
}
};
},
watch: {
data: {
async handler(val) {
this.form.contents = this.deepClone(val);
},
immediate: true,
deep: true
}
},
created() {
},
methods: {
// 添加一行数据
handleAdd() {
const item = {
equipmentName: undefined,
purchaseQuantity: 1,
equipmentUnit: undefined
};
this.form.contents.push(item);
},
handleDelete(index) {
this.$modal.confirm(`是否确认删除当前数据项？`).then(() => {
this.form.contents.splice(index, 1);
}).catch(() => {
});
}
}
};
</script>
<style scoped lang="scss">
.el-form{
.el-form-item--mini.el-form-item{
margin: 0;
.el-input-number{
width: 100%;
}
}
}
.addBtn{
width: 100%;
margin-top: 20px;
border: 1px dashed #DCDFE6;
}
::v-deep{
.el-table--border .el-table__cell{
border-right: none
}
}
</style>
<!-- 父组件 -->
<project-content ref="projectContent" :data="form.contents" :is-disabled="isDisabled || !form.access.contents.write" />
// 校验项目内容表单
validateContentForm(projectContent) {
projectContent.$refs.formChild.validate(async valid => {
if (valid) {
try {
this.btnLoading = true;
const form = this.deepClone(this.form);
} catch (error) {
}
}
});
},
/** 提交按钮 */
submitForm() {
const projectContent = this.$refs.projectContent;
this.form.contents = this.deepClone(projectContent.form.contents) || [];
this.$refs['form'].validate(valid => {
if (valid) {
this.validateContentForm(projectContent);
}
});
}