|
@@ -1,202 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="app-container" v-if="this.pageShow">
|
|
|
- <!-- 筛选start -->
|
|
|
- <div class="mb-20">所有台区</div>
|
|
|
- <div class="filter-container mb-10">
|
|
|
- <div>
|
|
|
- <div class="filter-item">
|
|
|
- 台区:
|
|
|
- <el-input
|
|
|
- v-model="input"
|
|
|
- placeholder="请输入内容"
|
|
|
- style="width: 240px"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
-
|
|
|
- <el-button type="primary" icon="el-icon-search" class="search-button"
|
|
|
- >搜索</el-button
|
|
|
- >
|
|
|
-
|
|
|
- <el-button icon="el-icon-plus" type="success" @click="addItem()"
|
|
|
- >新增</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <!-- 筛选end -->
|
|
|
-
|
|
|
- <!-- 表格start -->
|
|
|
- <el-table
|
|
|
- :data="tableData"
|
|
|
- border
|
|
|
- stripe
|
|
|
- :header-cell-style="headClass"
|
|
|
- :cell-style="cellStyle"
|
|
|
- >
|
|
|
- <el-table-column fixed prop="stationName" label="台区名称" width="">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="stationCode" label="台区编号" width="">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="stationAddress" label="台区地址" width="">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="pointNum" label="点位数量" width="">
|
|
|
- <template #default="scope">
|
|
|
- <span @click="goSiteList"> {{ scope.row.pointNum }}</span>
|
|
|
- <!-- <router-link style="margin-right:15px;" :to="{ path:'siteList',query:{id:scope.row.stationName}}">
|
|
|
- {{ scope.row.pointNum }}
|
|
|
- </router-link> -->
|
|
|
- </template>
|
|
|
-
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="deviceNum" label="挂载设备数量" width="350">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column fixed="right" label="操作" width="250">
|
|
|
- <template #default="scope">
|
|
|
- <el-button
|
|
|
- type="text"
|
|
|
- size="small"
|
|
|
- @click.prevent="editRow(scope.row)"
|
|
|
- >编辑</el-button
|
|
|
- >
|
|
|
- <el-button
|
|
|
- @click="handleDelete(scope.$index, scope.row)"
|
|
|
- type="text"
|
|
|
- size="small"
|
|
|
- class="delete-text"
|
|
|
- >删除</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <!-- 表格end -->
|
|
|
-
|
|
|
- <!--弹框组件开始-----------------------start-->
|
|
|
- <dialog-component
|
|
|
- v-if="showDialog"
|
|
|
- ref="dialogComponent"
|
|
|
- :dialog-title="dialogTitle"
|
|
|
- :item-info="tableItem"
|
|
|
- @closeDialog="closeDialog"
|
|
|
- ></dialog-component>
|
|
|
- <!--弹框组件开始-----------------------end-->
|
|
|
- </div>
|
|
|
- <site-list v-else :pageShow="pageShow" @func="getMsgFormSon"></site-list>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import DialogComponent from "./dialogComponent";
|
|
|
-import siteList from './siteList'
|
|
|
-
|
|
|
-export default {
|
|
|
-
|
|
|
- components: { DialogComponent,siteList },
|
|
|
-
|
|
|
- data() {
|
|
|
- return {
|
|
|
- pageShow: true,
|
|
|
- showDialog: false,
|
|
|
- input: "请输入台区名称",
|
|
|
-
|
|
|
- tableData: [
|
|
|
- {
|
|
|
- stationName: "台区1",
|
|
|
- stationCode: "tq02",
|
|
|
- stationAddress: "青浦区徐泾镇",
|
|
|
- pointNum: "8",
|
|
|
- deviceNum: "10",
|
|
|
-
|
|
|
- },
|
|
|
- {
|
|
|
- stationName: "台区1",
|
|
|
- stationCode: "tq02",
|
|
|
- stationAddress: "青浦区徐泾镇",
|
|
|
- pointNum: "8",
|
|
|
- deviceNum: "10",
|
|
|
- },
|
|
|
- {
|
|
|
- stationName: "台区1",
|
|
|
- stationCode: "tq02",
|
|
|
- stationAddress: "青浦区徐泾镇",
|
|
|
- pointNum: "8",
|
|
|
- deviceNum: "10",
|
|
|
- },
|
|
|
- {
|
|
|
- stationName: "台区1",
|
|
|
- stationCode: "tq02",
|
|
|
- stationAddress: "青浦区徐泾镇",
|
|
|
- pointNum: "8",
|
|
|
- deviceNum: "10",
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- goSiteList() {
|
|
|
- this.pageShow = !this.pageShow
|
|
|
- },
|
|
|
- getMsgFormSon() {
|
|
|
- this.pageShow = !this.pageShow
|
|
|
- },
|
|
|
-
|
|
|
- // 表头样式设置
|
|
|
- headClass() {
|
|
|
- return "background:#FAFAFA;";
|
|
|
- },
|
|
|
-
|
|
|
- //自定义列样式
|
|
|
- cellStyle({ row, column, rowIndex, columnIndex }) {
|
|
|
- row, column, rowIndex
|
|
|
- if (columnIndex === 3) {
|
|
|
- return `color:#0284E8;cursor:pointer`;
|
|
|
- } else {
|
|
|
- return "";
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 添加操作
|
|
|
- addItem() {
|
|
|
- this.tableItem = {
|
|
|
- id: "",
|
|
|
- stationName: "",
|
|
|
- stationCode: "",
|
|
|
- stationAddress: "",
|
|
|
- siteList: [],
|
|
|
- done: "",
|
|
|
- guaZai: "",
|
|
|
- };
|
|
|
- this.dialogTitle = "新增";
|
|
|
- this.showDialog = true;
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs["dialogComponent"].showDialog = true;
|
|
|
- });
|
|
|
- },
|
|
|
- // 编辑操作
|
|
|
- editRow(row) {
|
|
|
- console.log(row);
|
|
|
- this.tableItem = row;
|
|
|
- this.dialogTitle = "编辑";
|
|
|
- this.showDialog = true;
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs["dialogComponent"].showDialog = true;
|
|
|
- });
|
|
|
- },
|
|
|
- // 关闭操作
|
|
|
- closeDialog(flag) {
|
|
|
- if (flag) {
|
|
|
- // 重新刷新表格内容
|
|
|
- this.fetchData();
|
|
|
- }
|
|
|
- this.showDialog = false;
|
|
|
- },
|
|
|
-
|
|
|
- //删除操作
|
|
|
- handleDelete(index, row) {
|
|
|
- console.log(index, row);
|
|
|
- alert(index);
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-</style>
|