<template><!-- 图层管理 --><div class="home-wrapper"><div class="table-list"><div class="list"><el-table :data="tableData" height="100%" style="width: 100%;" border><el-table-column type="expand"><template slot-scope="props"><el-table :data="props.row.tableData" :show-header="false" class="inner-table" style="width: calc(100% - 48px);margin-left: 48px;"><el-table-column prop="itemName" align="center" width="320"></el-table-column><el-table-column prop="itemIndexX" align="center" width="320"></el-table-column><el-table-column prop="itemOpen1" align="center" width="320"><template slot-scope="{row}"><el-switch :value="row.itemOpen1" @change="handleOpen1(row)"></el-switch></template></el-table-column><el-table-column prop="itemOpen2" align="center" width="320"><template slot-scope="{row}"><el-switch :value="row.itemOpen2" @change="handleOpen2(row)"></el-switch></template></el-table-column><el-table-column label="操作" align="center"><template slot-scope="{row}"><el-button size="mini" type="text" icon="el-icon-view" @click="handleEdit(row)">编辑</el-button></template></el-table-column></el-table></template></el-table-column><el-table-column label="图层名称" prop="name" align="center" width="320"></el-table-column><el-table-column label="排序" prop="indexX" align="center" width="320"></el-table-column><el-table-column label="图层状态" align="center" width="320"></el-table-column><el-table-column label="是否开放" align="center" width="320"></el-table-column><el-table-column label="操作" align="center"><template slot-scope="{row}"><el-button size="mini" type="text" icon="el-icon-view" @click="handleEdit(row)">编辑</el-button></template></el-table-column></el-table></div><div class="pagination"><el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="tableParams.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="tableParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination></div></div><!-- 编辑 --><editDialog v-if="editDialog" :dialogShow="editDialog" :form="form" @close="close"></editDialog></div>
</template><script>
import { getRequiresTime, timestampToTime1 } from "@/utils/index";
import editDialog from "./components/editDialog.vue";
export default {components: { editDialog },name: "index",data() {return {tableParams: {pageNum: 1,pageSize: 10,},// 总数totalCount: 0,// 表格数据tableData: [{name: "生态空间",indexX: 1,tableData: [{itemName: "11",itemIndexX: 1,itemOpen1: false,itemOpen2: true,},{itemName: "22",itemIndexX: 2,itemOpen1: false,itemOpen2: true,},{itemName: "33",itemIndexX: 3,itemOpen1: false,itemOpen2: true,},],},],editDialog: false,form: {},};},created() {this.getListData();},mounted() {},methods: {// 获取数据getListData() {},// 查询handleQuery() {this.tableParams.pageNum = 1;this.tableParams.pageSize = 10;this.getListData();},// 图层状态开关handleOpen1(val) {let titleName = "开启";if (val.itemOpen1 == true) {titleName = "开启后该图层将进行展示，是否确认";} else {titleName = "关闭后该图层将不进行展示，是否确认";}this.$confirm(`${titleName}`, "操作确认", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",confirmButtonClass: "confirm-button-sure",cancelButtonClass: "confirm-button-cancel",}).then(() => {console.log("确定", val);val.itemOpen1 = !val.itemOpen1;}).catch(() => {console.log("取消", val);});},// 是否开放开关handleOpen2(val) {let titleName = "开启";if (val.itemOpen2 == true) {titleName = "开启后该图层将公开展示，是否确认";} else {titleName = "关闭后该图层将不公开展示，是否确认";}this.$confirm(`${titleName}`, "操作确认", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",confirmButtonClass: "confirm-button-sure",cancelButtonClass: "confirm-button-cancel",}).then(() => {console.log("确定", val);val.itemOpen2 = !val.itemOpen2;}).catch(() => {console.log("取消", val);});},// 编辑handleEdit(val) {this.form = valthis.editDialog = true;},// 每页几条数据handleSizeChange(val) {this.tableParams.pageSize = val;this.getListData();},// 当前为第几页handleCurrentChange(val) {this.tableParams.pageNum = val;this.getListData();},// 关闭弹窗close(val) {this.editDialog = val;this.getListData();},},
};
</script><style lang="scss" scoped>
.table-list {margin-top: 0;overflow: hidden;.list {overflow: hidden;}
}
::v-deep .el-table__expanded-cell {padding: 0 !important;
}
::v-deep .inner-table {.el-table__cell:last-child {border-right: none !important;// border-bottom: none !important;}.el-table__cell:first-child {border-left: 1px solid #dfe6ec;// border-bottom: none !important;}.el-table__row:last-child .el-table__cell {border-bottom: none !important;}&::before {height: 0px;}
}
</style>