-

src/views/stationManage/index copy-oriange.vue

@@ -0,0 +1,202 @@
+<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>

src/views/stationManage/index.vue

@@ -5,23 +5,22 @@
     <div class="filter-container mb-10">
       <div>
         <div class="filter-item">
-        台区：
-        <el-input
-          v-model="input"
-          placeholder="请输入内容"
-          style="width: 240px"
-        ></el-input>
-      </div>
+          台区：
+          <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 type="primary" icon="el-icon-search" class="search-button"
-        >搜索</el-button
-      >
-    
-      <el-button icon="el-icon-plus" type="success" @click="addItem()"
-        >新增</el-button
-      >
+        <el-button icon="el-icon-plus" type="success" @click="addItem()">
+          新增
+        </el-button>
       </div>
-      
     </div>
     <!-- 筛选end -->
 
@@ -33,38 +32,52 @@
       :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
+        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}}">
+        <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">
+        </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>
           <el-button
             @click="handleDelete(scope.$index, scope.row)"
             type="text"
             size="small"
             class="delete-text"
-            >删除</el-button
           >
+            删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -84,128 +97,131 @@
 </template>
 
 <script>
-import DialogComponent from "./dialogComponent";
+import { defineComponent, ref, reactive } from 'vue'
+import DialogComponent from './dialogComponent'
 import siteList from './siteList'
-// import { mapGetters } from "vuex";
-
-export default {
-  // name: "Dashboard",
-  // computed: {
-  //   ...mapGetters(["name"]),
-  // },
 
-  components: { DialogComponent,siteList },
+export default defineComponent({
+  components: { DialogComponent, siteList },
+  setup() {
+    const input = ref('请输入台区名称')
+    const pageShow = ref(true)
+    const showDialog = ref(false)
+    const tableData = ref([
+      {
+        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',
+      },
+    ])
 
-  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
-    },
+    const goSiteList = () => {
+      pageShow.value = !pageShow.value
+    }
+    const getMsgFormSon = () => {
+      pageShow.value = !pageShow.value
+    }
 
     // 表头样式设置
-    headClass() {
-      return "background:#FAFAFA;";
-    },
+    const headClass = () => {
+      return 'background:#FAFAFA;'
+    }
 
     //自定义列样式
-    cellStyle({ row, column, rowIndex, columnIndex }) {
+    const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
       row, column, rowIndex
       if (columnIndex === 3) {
-        return `color:#0284E8;cursor:pointer`;
+        return `color:#0284E8;cursor:pointer`
       } else {
-        return "";
+        return ''
       }
-    },
+    }
 
+    const tableItem = reactive([])
+    const dialogTitle = ref('')
     // 添加操作
-    addItem() {
-      this.tableItem = {
-        id: "",
-        stationName: "",
-        stationCode: "",
-        stationAddress: "",
+
+    const dialogComponent = ref()
+    const addItem = () => {
+      tableItem.value = {
+        id: '',
+        stationName: '',
+        stationCode: '',
+        stationAddress: '',
         siteList: [],
-        done: "",
-        guaZai: "",
-      };
-      this.dialogTitle = "新增";
-      this.showDialog = true;
-      this.$nextTick(() => {
-        this.$refs["dialogComponent"].showDialog = true;
-      });
-    },
+        done: '',
+        guaZai: '',
+      }
+      dialogTitle.value = '新增'
+      showDialog.value = true
+
+      console.log(dialogComponent)
+      // dialogComponent.value.showDialog = true
+    }
     // 编辑操作
-    editRow(row) {
-      console.log(row);
-      this.tableItem = row;
-      this.dialogTitle = "编辑";
-      this.showDialog = true;
+    const editRow = (row) => {
+      console.log(row)
+      this.tableItem = row
+      this.dialogTitle = '编辑'
+      this.showDialog = true
       this.$nextTick(() => {
-        this.$refs["dialogComponent"].showDialog = true;
-      });
-    },
+        this.$refs['dialogComponent'].showDialog = true
+      })
+    }
     // 关闭操作
-    closeDialog(flag) {
+    const closeDialog = (flag) => {
       if (flag) {
         // 重新刷新表格内容
-        this.fetchData();
+        this.fetchData()
       }
-      this.showDialog = false;
-    },
-
-    // handleEdit(index, row) {
-    //   console.log(index, row);
-    // },
+      this.showDialog = false
+    }
 
     //删除操作
-    handleDelete(index, row) {
-      console.log(index, row);
-      alert(index);
-    },
+    const handleDelete = (index, row) => {
+      console.log(index, row)
+      alert(index)
+    }
+
+    return {
+      tableData,
+      input,
+      pageShow,
+      showDialog,
+
+      goSiteList,
+      getMsgFormSon,
+      headClass,
+      cellStyle,
+      addItem,
+      editRow,
+      closeDialog,
+      handleDelete,
+    }
   },
-};
+})
 </script>
 
-<style lang="scss" scoped>
-</style>