elementUI-新增，编辑，详情组件

父↓

<template>
  <div>
    <!-- 数据操作部分 -->
    <div class="search" style="float:left">
      <el-form :inline="true" :model="dataForm" class="demo-form-inline">
        <el-form-item label="计划名">
          <el-input placeholder="请输入XXXX..." clearable style="width: 300px; margin-right: 10px"
            v-model="dataForm.planName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="initDatalist">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="searchRest()">重置
          </el-button>
        </el-form-item>
      </el-form>
      <el-row>

        <el-button style="float:left;margin-bottom:10px" type="primary" icon="el-icon-plus"
          @click="addInfo(row= {},status=1)">新增</el-button>

      </el-row>
    </div>
    <!-- 数据列表部分 -->
    <div>
      <el-table @selection-change="handleSelectionChange" id="tableData" :data="dataList" border v-loading="loading"
        style="width: 100%">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="planName" label="计划名"></el-table-column>
        <el-table-column prop="valid" label="是否有效">
          <template slot-scope="scope">
            <span v-if="scope.row.valid==1">有效</span>
            <span v-else>无效</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addInfo(scope.row,status = 2)">编辑</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-dropdown>
              <el-button type="text" size="small">更多...</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="addInfo(scope.row,status = 3)">详情</el-dropdown-item>
                <!-- <el-dropdown-item @click.native="deleteRow(scope.row)">删除</el-dropdown-item> -->
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="block">
      <el-pagination style="margin-top: 20px" @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
        :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
        :hide-on-single-page="true
        layout=" total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
    <item-add v-if="addEditDetailVisible" ref="addEditDetailDoms" @refreshDataList="initDatalist"></item-add>
  </div>

</template>

<script>
import ItemAdd from "../ptrlListManager/item-add.vue";
export default {
  name: "dataListManager",
  components: {
    ItemAdd,
  },
  data() {
    return {
      addEditDetailVisible: false,
      loading: false,
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataForm: {},
      // Rules:规则在此编写
      dataFormRules: {},
      multipleSelection: []
    };
  },
  methods: {
    searchRest() {
      this.dataForm = {}
      this.initDatalist()
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.initDatalist();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.initDatalist();
    },
    addInfo(row, status) {
      this.addEditDetailVisible = true;
      this.$nextTick(() => {
        this.$refs.addEditDetailDoms.init(row, status);
      });
    },
    // 分页方法
    currentPageChange(currPage) {
      this.currPage = currPage;
      this.initDatalist();
    },
    // 数据初始化
    initDatalist() {
      this.loading = true;
      let url = "xxxxxx";
      let params = {
        page: this.pageIndex,
        pageSize: this.pageSize,
        planName: this.dataForm.planName,
        planType: this.dataForm.planType,
        valid: this.dataForm.valid,
      };
      this.getRequest(url, params).then((resp) => {
        if (resp && resp.code == 200) {
          this.dataList = resp.result;
          this.totalPage = resp.result.total;
          this.pageSize = resp.result.size;
          this.pageIndex = resp.result.pages;
          this.loading = false;
          this.$message.success("获取成功");
        } else {
          let error = response.errMessage || "查询失败";
          this.$message.error(error);
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },
  mounted() {
    this.initDatalist();
  },
};
</script>

<style>

</style>

复杂子（带表格）↓

<template>
  <div>
    <el-dialog :title="statusTitle" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="900px">
      <el-form :model="dataForm" label-width="100px" :inline="false" ref="dataForm" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="计划名" prop="planName">
              <el-input style="width: 200px" v-model="dataForm.planName" autocomplete="off" :disabled="statusFlg == 3">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="巡检时间" prop="planTime">
              <el-date-picker style="width: 200px" v-model="dataForm.planTime" type="datetime" placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss " :disabled="statusFlg == 3">
              </el-date-picker>

            </el-form-item>
          </el-col>

      </el-form>
      <el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%" height="250"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" :selectable="checkSelectable"> </el-table-column>

        <el-table-column label="巡检区域" prop="areaName"> </el-table-column>

        <el-table-column header-align="center" align="center" label="操作" fixed="right" v-if="statusFlg != 3">
          <template slot-scope="scope">
            <el-button type="text" size="small" v-if="scope.row.associated === '1'" @click="deleteRow(scope.row)"
              style="color: #e32222">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="margin-top: 20px" @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
        :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关 闭</el-button>
        <el-button @click="submit()" type="success" v-if="statusFlg != 3">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataForm: {},
      addFlg: true,
      statusTitle: "",
      statusFlg: 1,
      dialogFormVisible: false,
      rules: {
        areaName: [
          { required: true, message: "请输入巡检区域", trigger: "blur" },
        ]
      },
      dataList: [],
      multipleSelection: [],
      planId: "",
      areaIds: []
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
    },
    checkSelectable(row, rowIndex) {
      if (row.associated == 1) {
        return false //不禁用
      } else {
        return true// 禁用
      }
    },
    deleteRow(row) {
      let url = "xxxx";
      this.deleteRequest(url, { id: row.relationId }).then((resp) => {
        if (resp && resp.code == 200) {
          this.initDatalist();
          this.$message.success("删除成功");
        } else {
          let error = response.errMessage || "删除失败";
          this.$message.error(error);
        }
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.initDatalist();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.initDatalist();
    },
    initDatalist() {
      this.dataList = []
      this.loading = true;

      let url = "xxxx";
      let params = {
        page: this.pageIndex,
        pageSize: this.pageSize,
        planId: this.planId
      };
      this.getRequest(url, params).then((resp) => {
        if (resp && resp.code == 200) {
          this.dataList = resp.result.records;
          this.totalPage = resp.result.total;
          this.pageSize = resp.result.size;
          this.pageIndex = resp.result.pages;
          this.loading = false;
        }else{
          let error = response.errMessage || "查询失败";
          this.$message.error(error);
        }
      });
    },
    addRelation() {
      let url = "子表增加";
      let params = {
        planId: this.planId,
        areaIds: this.areaIds,
      };
      this.postRequest(url, params).then((resp) => {
        if (resp && resp.code == 200) {
          this.initDatalist();
          this.$message.success("增加成功");
        }else{
          let error = response.errMessage || "增加失败";
          this.$message.error(error);
        }
      });
    },
    init(row, status) {
      console.log(row)
      if (row) {
        this.planId = row.id;
      } else {
        this.planId = null;
      }
      this.pageIndex = 1
      this.pageSize = 10
      this.totalPage = 0
      this.initDatalist();
      this.dialogFormVisible = true;
      switch (status) {
        case 1:
          this.dataForm = {};
          this.addFlg = true;
          this.statusFlg = 1;
          break;
        case 2:
          this.dataForm = row;
          this.addFlg = false;
          this.statusFlg = 2;
          break;
        case 3:
          this.dataForm = row;
          this.addFlg = false;
          this.statusFlg = 3;
          break;
      }
    },
    submit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          if (this.addFlg) {
            let url = "新增";
            this.dataForm.areaIds = this.areaIds
            this.postRequest(url, this.dataForm).then((resp) => {
              if (resp && resp.code == 200) {
                this.dialogFormVisible = false;
                this.$emit("refreshDataList");
                this.$message.success("保存成功");
              } else {
                let error = response.errMessage || "保存失败";
                this.$message.error(error);
              }
            });
          } else {
            let url = "编辑";
            this.postRequest(url, this.dataForm).then((resp) => {
              if (resp && resp.code == 200) {
                this.dialogFormVisible = false;
                this.addRelation();
                this.$emit("refreshDataList");
                this.$message.success("保存成功");
              } else {
                let error = response.errMessage || "保存失败";
                this.$message.error(error);
              }
            });
          }
        }
      });
    },
  },
  watch: {
    statusFlg: {
      immediate: true,
      handler(val) {
        switch (val) {
          case 1:
            this.statusTitle = "新增";
            break;
          case 2:
            this.statusTitle = "编辑";
            break;
          case 3:
            this.statusTitle = "详情";
            break;
        }
      },
    },
    multipleSelection: {
      handler(val) {
        let self = this
        this.areaIds = []
        this.multipleSelection.forEach(function (item, index) {
          self.areaIds.push(item.areaId)
        })
      },
    }
  },
};
</script>

简单子↓

<template>
  <div>
    <el-dialog :title="statusTitle" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="900px">
      <el-form :model="dataForm" label-width="100px" :inline="false" ref="dataForm" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="计划名" prop="planName">
              <el-input style="width: 200px" v-model="dataForm.planName" autocomplete="off" :disabled="statusFlg == 3">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="巡检时间" prop="planTime">
              <el-date-picker style="width: 200px" v-model="dataForm.planTime" type="datetime" placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss " :disabled="statusFlg == 3">
              </el-date-picker>

            </el-form-item>
          </el-col>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关 闭</el-button>
        <el-button @click="submit()" type="success" v-if="statusFlg != 3">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataForm: {},
      addFlg: true,
      statusTitle: "",
      statusFlg: 1,
      dialogFormVisible: false,
      rules: {
        areaName: [
          { required: true, message: "请输入巡检区域", trigger: "blur" },
        ]
      },
      dataList: [],
      multipleSelection: [],
      planId: ""
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
    },
    checkSelectable(row, rowIndex) {
      if (row.associated == 1) {
        return false //不禁用
      } else {
        return true// 禁用
      }
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.initDatalist();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.initDatalist();
    },
    initDatalist() {
      this.dataList = []
      this.loading = true;
      let url = "xxxx";
      let params = {
        page: this.pageIndex,
        pageSize: this.pageSize,
        planId: this.planId
      };
      this.getRequest(url, params).then((resp) => {
        if (resp && resp.code == 200) {
          this.dataList = resp.result.records;
          this.totalPage = resp.result.total;
          this.pageSize = resp.result.size;
          this.pageIndex = resp.result.pages;
          this.loading = false;
        }else{
          let error = response.errMessage || "查询失败";
          this.$message.error(error);
        }
      });
    },
    init(row, status) {
      if (row) {
        this.planId = row.id;
      } else {
        this.planId = null;
      }
      this.pageIndex = 1
      this.pageSize = 10
      this.totalPage = 0
      this.initDatalist();
      this.dialogFormVisible = true;
      switch (status) {
        case 1:
          this.dataForm = {};
          this.addFlg = true;
          this.statusFlg = 1;
          break;
        case 2:
          this.dataForm = row;
          this.addFlg = false;
          this.statusFlg = 2;
          break;
        case 3:
          this.dataForm = row;
          this.addFlg = false;
          this.statusFlg = 3;
          break;
      }
    },
    submit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          if (this.addFlg) {
            let url = "新增";
            this.postRequest(url, this.dataForm).then((resp) => {
              if (resp && resp.code == 200) {
                this.dialogFormVisible = false;
                this.$emit("refreshDataList");
                this.$message.success("保存成功");
              } else {
                let error = response.errMessage || "保存失败";
                this.$message.error(error);
              }
            });
          } else {
            let url = "编辑";
            this.postRequest(url, this.dataForm).then((resp) => {
              if (resp && resp.code == 200) {
                this.dialogFormVisible = false;
                this.$emit("refreshDataList");
                this.$message.success("保存成功");
              } else {
                let error = response.errMessage || "保存失败";
                this.$message.error(error);
              }
            });
          }
        }
      });
    },
  },
  watch: {
    statusFlg: {
      immediate: true,
      handler(val) {
        switch (val) {
          case 1:
            this.statusTitle = "新增";
            break;
          case 2:
            this.statusTitle = "编辑";
            break;
          case 3:
            this.statusTitle = "详情";
            break;
        }
      },
    },

  },
};
</script>