排版

src/icons/svg/stationManage.svg

@@ -0,0 +1,7 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="16px" height="16px">
+<path fill-rule="evenodd"
+ d="M13.333,10.667 L10.667,10.667 L10.667,13.333 C10.667,14.806 9.473,16.000 8.000,16.000 L2.667,16.000 C1.194,16.000 -0.000,14.806 -0.000,13.333 L-0.000,8.000 C-0.000,6.527 1.194,5.333 2.667,5.333 L5.333,5.333 L5.333,2.667 C5.333,1.194 6.527,-0.000 8.000,-0.000 L13.333,-0.000 C14.806,-0.000 16.000,1.194 16.000,2.667 L16.000,8.000 C16.000,9.473 14.806,10.667 13.333,10.667 ZM2.667,6.667 C1.930,6.667 1.333,7.264 1.333,8.000 L1.333,13.333 C1.333,14.070 1.930,14.667 2.667,14.667 L8.000,14.667 C8.736,14.667 9.333,14.070 9.333,13.333 L9.333,10.667 L8.000,10.667 C6.527,10.667 5.333,9.473 5.333,8.000 L5.333,6.667 L2.667,6.667 ZM9.333,9.333 L9.333,8.000 C9.333,7.264 8.736,6.667 8.000,6.667 L6.667,6.667 L6.667,8.000 C6.667,8.736 7.264,9.333 8.000,9.333 L9.333,9.333 ZM14.667,2.667 C14.667,1.930 14.070,1.333 13.333,1.333 L8.000,1.333 C7.264,1.333 6.667,1.930 6.667,2.667 L6.667,5.333 L8.000,5.333 C9.473,5.333 10.667,6.527 10.667,8.000 L10.667,9.333 L13.333,9.333 C14.070,9.333 14.667,8.736 14.667,8.000 L14.667,2.667 Z"/>
+</svg>

src/router/index.js

@@ -116,7 +116,7 @@ export const constantRoutes = [{
             name: 'StationManage',
             component: () =>
                 import ('@/views/stationManage/index'),
-            meta: { title: '台区管理', icon: 'form' }
+            meta: { title: '台区管理', icon: 'stationManage' }
         }]
     },
     {
@@ -388,40 +388,40 @@ export const constantRoutes = [{
     //     }]
     // },
 
-    // {
-    //     path: '/example',
-    //     component: Layout,
-    //     redirect: '/example/table',
-    //     name: 'Example',
-    //     meta: { title: 'Table', icon: 'el-icon-s-help' },
-    //     children: [{
-    //             path: 'table',
-    //             name: 'Table',
-    //             component: () =>
-    //                 import ('@/views/table/index'),
-    //             meta: { title: 'Table', icon: 'table' }
-    //         },
-    //         {
-    //             path: 'tree',
-    //             name: 'Tree',
-    //             component: () =>
-    //                 import ('@/views/tree/index'),
-    //             meta: { title: 'Tree', icon: 'tree' }
-    //         }
-    //     ]
-    // },
+    {
+        path: '/example',
+        component: Layout,
+        redirect: '/example/table',
+        name: 'Example',
+        meta: { title: 'Table', icon: 'el-icon-s-help' },
+        children: [{
+                path: 'table',
+                name: 'Table',
+                component: () =>
+                    import ('@/views/table/index'),
+                meta: { title: 'Table', icon: 'table' }
+            },
+            {
+                path: 'tree',
+                name: 'Tree',
+                component: () =>
+                    import ('@/views/tree/index'),
+                meta: { title: 'Tree', icon: 'tree' }
+            }
+        ]
+    },
 
-    // {
-    //     path: '/form',
-    //     component: Layout,
-    //     children: [{
-    //         path: 'index',
-    //         name: 'Form',
-    //         component: () =>
-    //             import ('@/views/form/index'),
-    //         meta: { title: 'Form', icon: 'form' }
-    //     }]
-    // },
+    {
+        path: '/form',
+        component: Layout,
+        children: [{
+            path: 'index',
+            name: 'Form',
+            component: () =>
+                import ('@/views/form/index'),
+            meta: { title: 'Form', icon: 'form' }
+        }]
+    },
 
     // {
     //     path: '/nested',

src/styles/index.scss

@@ -3,63 +3,114 @@
 @import './transition.scss';
 @import './element-ui.scss';
 @import './sidebar.scss';
-
 body {
-  height: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 }
 
 label {
-  font-weight: 700;
+    font-weight: 700;
 }
 
 html {
-  height: 100%;
-  box-sizing: border-box;
+    height: 100%;
+    box-sizing: border-box;
 }
 
 #app {
-  height: 100%;
+    height: 100%;
 }
 
 *,
 *:before,
 *:after {
-  box-sizing: inherit;
+    box-sizing: inherit;
 }
 
 a:focus,
 a:active {
-  outline: none;
+    outline: none;
 }
 
 a,
 a:focus,
 a:hover {
-  cursor: pointer;
-  color: inherit;
-  text-decoration: none;
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
 }
 
 div:focus {
-  outline: none;
+    outline: none;
 }
 
 .clearfix {
-  &:after {
-    visibility: hidden;
-    display: block;
-    font-size: 0;
-    content: " ";
-    clear: both;
-    height: 0;
-  }
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
 }
 
 // main-container global css
+.mb-20 {
+    margin-bottom: 20px
+}
+
+.delete-text {
+    color: #F80000
+}
+
 .app-container {
-  padding: 20px;
+    padding: 20px;
+    width: 100%;
+    height: 100%;
+    margin: 20px;
+    background: #fff;
+    min-height: calc(100vh - 140px)
+}
+
+.filter-container {
+    width: 100%;
+    height: 100%;
+    .el-button+.el-button {
+        margin-left: 30px!important;
+    }
+    .filter-item {
+        margin-right: 30px;
+        display: inline-block;
+    }
+}
+
+.el-input__inner {
+    height: 36px;
+    line-height: 36px
 }
+
+.el-button {
+    padding: 10px 12px
+}
+
+.el-table td,
+.el-table th {
+    padding: 10px 0
+}
+
+// 弹框样式start
+.el-dialog__header {
+    background: #f8f8f8;
+    padding: 16px 20px 16px;
+}
+
+.el-form-item {
+    width: 400px;
+    margin: 0 auto 20px;
+}
+
+// 弹框样式end

src/views/stationManage/dialogComponent.vue

@@ -0,0 +1,140 @@
+<template>
+  <transition name="dialog-fade">
+    <el-dialog
+      v-if="showDialog"
+      :title="dialogTitle"
+     
+      class="dialog-component"
+      :visible.sync="showDialog"
+      width="640px"
+      @close="closeDialog(0)"
+    >
+      <el-form
+        ref="formInfo"
+        :model="formInfo"
+        class="demo-form-inline"
+        label-width="100px"
+          :rules="rules"
+      >
+        <el-form-item label="台区名称：" prop="stationName" >
+          <el-input v-model="formInfo.stationName"></el-input>
+        </el-form-item>
+        <el-form-item label="台区编号：" prop="stationCode">
+          <el-input v-model="formInfo.stationCode"></el-input>
+        </el-form-item>
+        <el-form-item label="台区地址：" prop="stationAddress">
+          <el-input v-model="formInfo.stationAddress"></el-input>
+        </el-form-item>
+         <el-form-item label="站点列表:" prop="siteList" >
+          <el-select v-model="formInfo.siteList"  placeholder="" >
+            <el-option label="请选择" value=""></el-option>
+            <el-option label="站点一" value="3"></el-option>
+            <el-option label="站点二" value="4"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="已勾选：" prop="done" >
+          <el-input v-model="formInfo.done" style="width:200px"></el-input>  个站点
+        </el-form-item>
+        <el-form-item label="共挂载：" prop="guaZai">
+          <el-input v-model="formInfo.guaZai" style="width:200px"></el-input>  个设备
+        </el-form-item>
+        <br>
+        <br>
+        <br>
+        <div style="text-align: right;">
+             <el-button @click="closeDialog(0)">取消</el-button>
+          <el-button type="primary" @click="submitForm('formInfo')"
+            >保存</el-button
+          >
+         
+        </div>
+      </el-form>
+    </el-dialog>
+  </transition>
+</template>
+ 
+<script>
+export default {
+  name: "DialogComponent",
+  props: {
+    dialogTitle: {
+      type: String,
+      default: "新增",
+    },
+    itemInfo: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      showDialog: false,
+      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
+       rules: {
+        stationName: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: "请输入台区名称", trigger: "blur" },
+          { min: 3,max: 6, message: "用户名长度在 3 到 6 个字符", trigger: "blur"},
+        ],
+         stationCode: [
+          { required: true, message: "请输入台区编号", trigger: "blur" },
+          { min: 3,max: 6, message: "用户名长度在 3 到 6 个字符", trigger: "blur"},
+        ],
+        stationAddress: [
+          { required: true, message: "请输入台区地址", trigger: "blur" },
+          { min: 3,max: 6, message: "用户名长度在 3 到 6 个字符", trigger: "blur"},
+        ],
+         siteList: [
+          { required: true, message: "请选择站点列表", trigger: "blur" },
+          {  trigger: "blur"},
+        ],
+        done: [
+          { required: true, message: "请输入已选站点个数", trigger: "blur" },
+          {  trigger: "blur"},
+        ],
+        guaZai: [
+          { required: true, message: "请输入挂载设备个数", trigger: "blur" },
+          {  trigger: "blur"},
+        ],
+       }
+      
+    }
+  },
+  methods: {
+    // 保存操作
+    submitForm(formName) {
+      const that = this;
+      const params = Object.assign(that.formInfo, {});
+      that.$refs[formName].validate((valid) => {
+        if (valid) {
+          // 走保存请求
+          that.$message({
+            message: "操作成功！",
+            type: "success",
+          });
+          that.closeDialog(1);
+        } else {
+          return false;
+        }
+      });
+    },
+    // 关闭弹框
+    closeDialog(flag) {
+      this.$refs["formInfo"].resetFields();
+      this.showDialog = false;
+      this.$emit("closeDialog", flag);
+    },
+  },
+};
+</script>
+ 
+<style scoped lang="scss">
+
+.el-input,.el-select{
+    width:240px
+}
+
+</style>

src/views/stationManage/index.vue

@@ -1,30 +1,188 @@
 <template>
-  <div class="dashboard-container">
-    <div class="dashboard-text">台区管理</div>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="mb-20">所有台区</div>
+    <div class="filter-container mb-20">
+      <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>
+    <!-- 筛选end -->
+    <!-- <el-divider></el-divider> -->
+
+    <!-- 表格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="">
+      </el-table-column>
+      <el-table-column prop="deviceNum" label="挂载设备数量" width="350">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="250">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.native.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 -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+
+    <!-- 新增修改弹框end -->
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import DialogComponent from "./dialogComponent";
+// import { mapGetters } from "vuex";
 
 export default {
-  name: 'Dashboard',
-  computed: {
-    ...mapGetters([
-      'name'
-    ])
-  }
-}
+  // name: "Dashboard",
+  // computed: {
+  //   ...mapGetters(["name"]),
+  // },
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      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: {
+    // 添加操作
+    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;
+    },
+
+    // 表头样式设置
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 3) {
+        return `color:#0284E8;`;
+      } else {
+        return "";
+      }
+    },
+
+    handleEdit(index, row) {
+      console.log(index, row);
+    },
+    handleDelete(index, row) {
+      console.log(index, row);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-.dashboard {
-  &-container {
-    margin: 30px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
 </style>