功能描述：首先配置水质报告的增删改查的功能，这个功能是为了配置。
然后在水质检测这边就可以进行水质检测的实现了，先拿到刚才的配置。
这里的水质检测有两种新增：出厂水质与过程水质。
出厂的水质比较简单一点，
上代码
<!-- 添加或修改出水出厂水水质报告记录对话框 -->
<el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="检测时间" prop="reportTime">
<el-date-picker clearable
v-model="form.reportTime"
type="datetime"
:disabled="disabled"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择检测时间"
>
</el-date-picker>
</el-form-item>
<el-table
:data="waterList"
:span-method="arraySpanMethod"
border
style="width: 100%">
<el-table-column
type="index"
align="center"
width="50">
</el-table-column>
<el-table-column
prop="realName"
label="检测区域"
align="center"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="检测项目"
align="center"
width="180">
</el-table-column>
<el-table-column
prop="value"
width="150"
align="center"
label="检测结果">
<template slot-scope="scope">
<el-input :disabled="disabled" v-model="scope.row.value" placeholder="请输入检测结果" />
</template>
</el-table-column>
<el-table-column
prop="unit"
align="center"
label="单位">
</el-table-column>
</el-table>
</el-form>
<div slot="footer" class="dialog-footer" v-show="typeLog==2">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
过程的水质复杂一点
先从配置的接口哪到配置的数据这一步就不好搞了。因为前端要回显，要双向绑定。
上接口返回的数据，目前配置了三层结构，也只实现了三层，
看接口返回的数据层级和前端的表格绑定的数据的关系
比如表头配置和第二列的配置都很好绑定，但是每个PH纵列的input值 不好绑定了，因为前端这里的表格，横向的是绑定一个数组，纵向绑定的也是一个数组，前端实际上就写了一个input 循环实现的横向与纵向。
这里的绑定 想了很长时间，因为不单单要新增，还需要回显功能的。
下面是接口返回的真实数据，就是前面的自己配置的。
废话不多说了，上代码。
<!-- 添加或修改过程水水质报告记录对话框 -->
<el-dialog :title="titles" :visible.sync="process" width="50%" append-to-body>
<el-form ref="formWater" :model="formWater" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="检测时间:" prop="reportTime">
<el-date-picker clearable
v-model="formWater.reportTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择检测时间"
:disabled="disabledProcess"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="过程水:" >
<el-select :disabled="disabledProcess" value-key="wqrcId" v-model="processValue" placeholder="请选择" clearable @change="onChange">
<el-option v-for="item in processList" :key="item.wqrcId" :label="item.name"
:value="item" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-table
v-show="processValue"
:data="processValue.children"
border
style="width: 100%"
max-height="50%"
>
<el-table-column
type="index"
align="center"
width="50">
</el-table-column>
<el-table-column
prop="name"
label="检测区域"
align="center"
width="180">
</el-table-column>
<el-table-column
align="center"
v-for="(item, index) in lastChildren[0]"
:key="index"
width="170"
:prop="'value'+index"
:label="item.name +(item.unit ? '('+item.unit+')' :'')">
<template slot-scope="scope">
<el-input :disabled="disabledProcess" v-model="lastChildren[scope.$index][index].value" placeholder="请输入" />
</template>
</el-table-column>
</el-table>
</el-form>
<div slot="footer" class="dialog-footer" v-show="typeLog==2">
主要是这个input绑定，这里的scope.$index 是拿到每一行的index。
最后的回显
