父↓
<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>
