平台管控-管理员

src/assets/less/common.less

@@ -341,6 +341,7 @@ fieldset[disabled] .ivu-input,
   user-select: text;
 }
 // 按钮样式
+.ivu-modal-confirm-footer .ivu-btn.ivu-btn-primary,
 .primary_btn.ivu-btn.ivu-btn-primary {
   border: none;
   border-radius: 8px;
@@ -349,6 +350,21 @@ fieldset[disabled] .ivu-input,
   box-shadow: inset 0 1px 2px 0 #ffffffb3, inset 0 -2px 3px 0 #ffffff4d,
     0 3px 5px 0 #339dff80, inset 0 -2px 0 0 #2b89e0;
 }
+.ivu-modal-confirm-body {
+  color: #7C8DB5;
+  font-size: 16px;
+}
+.ivu-btn.ivu-btn-default {
+  color: #7C8DB5;
+  border: 1px solid #b8c2d9;
+  border-radius: 8px;
+}
+.ivu-modal-confirm-footer .ivu-btn.ivu-btn-text {
+  margin-right: 16px;
+  color: #7C8DB5;
+  border: 1px solid #b8c2d9;
+  border-radius: 8px;
+}
 .main_root {
   margin: 0 16px 10px;
   min-height: calc(100% - 10px);
@@ -356,6 +372,7 @@ fieldset[disabled] .ivu-input,
   border: 1px solid #e9f0f9;
   background-color: #fff;
 }
+// 表格
 .table_wrap {
   margin: 0 16px;
   border: 1px solid #e8eaec;
@@ -374,4 +391,40 @@ fieldset[disabled] .ivu-input,
 .page_wrap {
   padding: 16px;
   text-align: right;
+}
+// 自定义树选择输入框
+.tree_drop_input {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 8px;
+  height: 32px;
+  color: #515a6e;
+  background-color: #fff;
+  border-radius: 6px;
+  border: 1px solid #dcdee2;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+  &:hover {
+    border-color: #57a3f3;
+  }
+  .tree_drop_selected {
+    width: calc(100% - 15px);
+    height: 30px;
+    line-height: 30px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    &:empty::before {
+      content: attr(placeholder);
+      color: #c0c4cc;
+    }
+  }
+  .tree_drop_arrow {
+    color: #808695;
+    transition: all 0.2s ease-in-out;
+    &.arrow_down {
+      transform: rotate(180deg);
+    }
+  }
 }

src/components/CustomTree/CustomTree.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="tree_root">
+    <div class="level_root" v-for="levelItem in list" :key="levelItem.treeid">
+      <div
+        :class="[
+          'level_item',
+          selectedTreeItem.treeid === levelItem.treeid ? 'selected' : ''
+        ]"
+        @click="toChangeSelected(levelItem)"
+      >
+        <div class="level_item_main">
+          <div
+            class="arrow_icon_box"
+            @click="toChangeOpenChildren(levelItem)"
+            v-if="levelItem.childList && levelItem.childList.length > 0"
+          >
+            <Icon
+              :class="['arrow_icon', levelItem.open ? 'arrow_down' : '']"
+              type="ios-arrow-forward"
+              :size="16"
+            />
+          </div>
+          <div v-else class="replace_dom"></div>
+          <div class="level_title">
+            {{ levelItem.treealias }}
+          </div>
+        </div>
+      </div>
+      <CustomTreeItem
+        v-if="levelItem.childList && levelItem.childList.length > 0"
+        :list="levelItem.childList"
+        :selected-tree-item="selectedTreeItem"
+        :open="levelItem.open"
+        :level="1"
+        @toChangeSelected="toChangeSelected"
+      ></CustomTreeItem>
+    </div>
+  </div>
+</template>
+
+<script>
+import CustomTreeItem from "./CustomTreeItem.vue";
+export default {
+  name: "CustomTree",
+  components: {
+    CustomTreeItem
+  },
+  props: {
+    // 列表数据
+    list: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      // 选中树
+      selectedTreeItem: {}
+    };
+  },
+  watch: {
+    list: {
+      handler() {
+        // 如果已选中就回显
+        let selectedTreeItem = this.originSelectedTreeItem(this.list);
+        if (selectedTreeItem) {
+          this.toChangeSelected(selectedTreeItem);
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    // 已选中就回显
+    originSelectedTreeItem(list) {
+      if (list.length > 0 && this.selectedTreeItem.treeid) {
+        for (let treeItem of list) {
+          if (treeItem.treeid === this.selectedTreeItem.treeid) {
+            this.selectedTreeItem = treeItem;
+            return treeItem;
+          }
+          if (treeItem.childList && treeItem.childList.length > 0) {
+            let selectedTreeItem = this.originSelectedTreeItem(
+              treeItem.childList
+            );
+            if (selectedTreeItem) {
+              return selectedTreeItem;
+            }
+          }
+        }
+      }
+    },
+    // 选中树
+    toChangeSelected(levelItem) {
+      if (
+        this.selectedTreeItem.treeid === levelItem.treeid ||
+        !levelItem.treeid
+      ) {
+        return;
+      }
+      this.selectedTreeItem = levelItem;
+      this.$emit("selectedTreeItem", this.selectedTreeItem);
+    },
+    // 展开树
+    toChangeOpenChildren(levelItem) {
+      levelItem.open = !levelItem.open;
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.tree_root {
+  position: relative;
+  padding: 10px 0;
+  width: 100%;
+  .level_root {
+    position: relative;
+    width: 100%;
+    .level_item {
+      margin: 0 5px;
+      border-radius: 4px;
+      cursor: pointer;
+      &.selected,
+      &:hover {
+        color: var(--font_selected_color);
+        background-color: var(--bg_transparent_color);
+      }
+      .level_item_main {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        .arrow_icon_box {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          width: 20px;
+          height: 32px;
+          .arrow_icon {
+            transition: all 0.2s ease-in-out;
+            &.arrow_down {
+              transform: rotate(90deg);
+            }
+          }
+        }
+        .replace_dom {
+          width: 20px;
+          height: 32px;
+        }
+        .level_title {
+          width: calc(100% - 28px);
+          font-size: 12px;
+          line-height: 32px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/CustomTree/CustomTreeItem.vue

@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <div
+      class="level_root"
+      v-for="levelItem in list"
+      :key="levelItem.treeid"
+      v-show="open"
+    >
+      <div
+        :class="[
+          'level_item',
+          selectedTreeItem.treeid === levelItem.treeid ? 'selected' : ''
+        ]"
+        @click="toChangeSelected(levelItem)"
+      >
+        <div
+          class="level_item_main"
+          :style="{
+            marginLeft: `${level * 20}px`
+          }"
+        >
+          <div
+            class="arrow_icon_box"
+            @click="toChangeOpenChildren(levelItem)"
+            v-if="levelItem.childList && levelItem.childList.length > 0"
+          >
+            <Icon
+              :class="['arrow_icon', levelItem.open ? 'arrow_down' : '']"
+              type="ios-arrow-forward"
+              :size="16"
+            />
+          </div>
+          <div v-else class="replace_dom"></div>
+          <div class="level_title">
+            {{ levelItem.treealias }}
+          </div>
+        </div>
+      </div>
+      <CustomTreeItem
+        v-if="levelItem.childList && levelItem.childList.length > 0"
+        :list="levelItem.childList"
+        :selected-tree-item="selectedTreeItem"
+        :open="levelItem.open"
+        :level="level + 1"
+        @toChangeSelected="toChangeSelected"
+      ></CustomTreeItem>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CustomTreeItem",
+  props: {
+    // 列表数据
+    list: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    // 选中项
+    selectedTreeItem: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    // 是否展开
+    open: {
+      type: Boolean,
+      default: false
+    },
+    // 当前层级
+    level: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    toChangeSelected(levelItem) {
+      this.$emit("toChangeSelected", levelItem);
+    },
+    toChangeOpenChildren(levelItem) {
+      levelItem.open = !levelItem.open;
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.level_root {
+  position: relative;
+  width: 100%;
+  .level_item {
+    margin: 0 5px;
+    border-radius: 4px;
+    cursor: pointer;
+    &.selected,
+    &:hover {
+      color: var(--font_selected_color);
+      background-color: var(--bg_transparent_color);
+    }
+    .level_item_main {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      .arrow_icon_box {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        width: 20px;
+        height: 32px;
+        .arrow_icon {
+          transition: all 0.2s ease-in-out;
+          &.arrow_down {
+            transform: rotate(90deg);
+          }
+        }
+      }
+      .replace_dom {
+        width: 20px;
+        height: 32px;
+      }
+      .level_title {
+        width: calc(100% - 28px);
+        font-size: 12px;
+        line-height: 32px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+</style>

src/views/platformSection/regionManage/adminManage.vue

@@ -1,14 +1,459 @@
 <template>
-  <div class="main_root"></div>
+  <div class="main_root">
+    <div class="search_header">
+      <div class="search_left">
+        <Dropdown
+          :transfer="true"
+          trigger="custom"
+          class="search_drop"
+          :visible="searchForm.showDrop"
+          placement="bottom-start"
+        >
+          <div
+            class="tree_drop_input"
+            @click="searchForm.showDrop = !searchForm.showDrop"
+          >
+            <div class="tree_drop_selected">
+              {{ searchForm.areaname }}
+            </div>
+            <div>
+              <Icon
+                :class="[
+                  'tree_drop_arrow',
+                  searchForm.showDrop ? 'arrow_down' : ''
+                ]"
+                type="ios-arrow-down"
+              ></Icon>
+            </div>
+          </div>
+          <DropdownMenu
+            slot="list"
+            style="width: 200px"
+            @mousedown.native.stop
+            @click.native.stop
+          >
+            <CustomTree
+              :list="searchForm.dropList"
+              @selectedTreeItem="searchAreaChange"
+            ></CustomTree>
+          </DropdownMenu>
+        </Dropdown>
+        <Input
+          v-model="searchForm.name"
+          placeholder="请输入名称"
+          search
+          @on-search="searchList()"
+          style="width: 150px"
+        />
+      </div>
+      <Button type="primary" class="primary_btn" @click="toAdd()">新建</Button>
+    </div>
+    <div class="table_wrap">
+      <Table :columns="columns" :data="searchForm.list">
+        <template slot-scope="{ row }" slot="createtimeSlot">
+          <div>{{ date_format(row.createtime) }}</div>
+        </template>
+        <template slot-scope="{ row }" slot="updatetimeSlot">
+          <div>{{ date_format(row.updatetime) }}</div>
+        </template>
+        <template slot-scope="{ row }" slot="actionSlot">
+          <div class="action_list">
+            <div @click="toView(row)">查看</div>
+            <div @click="toEdit(row)">编辑</div>
+            <div class="action_del" @click="toDel(row)">删除</div>
+          </div>
+        </template>
+      </Table>
+    </div>
+    <div class="page_wrap">
+      <Page
+        :transfer="true"
+        :total="searchForm.total"
+        :current="searchForm.page"
+        :page-size="searchForm.size"
+        :page-size-opts="[10, 20, 40, 60]"
+        @on-change="pageChange"
+        @on-page-size-change="pageSizeChange"
+        show-total
+        show-sizer
+      ></Page>
+    </div>
+    <!-- 新建 -->
+    <Modal
+      class="modal1"
+      :mask-closable="false"
+      v-model="areaInfo.show"
+      :title="areaInfo.id ? '编辑' : '新建'"
+    >
+      <Form
+        ref="addForm"
+        :model="areaInfo"
+        :rules="rules"
+        :label-width="100"
+        inline
+      >
+        <FormItem label="区域名称" prop="areaname" style="width: 100%">
+          <Input
+            v-model="areaInfo.areaname"
+            placeholder="请输入区域名称"
+          ></Input>
+        </FormItem>
+        <FormItem
+          label="管理员名称"
+          prop="admin"
+          style="width: calc(50% - 10px)"
+        >
+          <Input
+            v-model="areaInfo.admin"
+            placeholder="请输入管理员名称"
+          ></Input>
+        </FormItem>
+        <FormItem
+          label="登录账号"
+          prop="loginname"
+          style="width: calc(50% - 10px)"
+        >
+          <Input
+            v-model="areaInfo.loginname"
+            placeholder="请输入登录账号"
+          ></Input>
+        </FormItem>
+        <FormItem label="密码" prop="pwd" style="width: calc(50% - 10px)">
+          <Input v-model="areaInfo.pwd" placeholder="请输入密码"></Input>
+        </FormItem>
+        <FormItem label="确认密码" prop="pwd1" style="width: calc(50% - 10px)">
+          <Input v-model="areaInfo.pwd1" placeholder="请输入确认密码"></Input>
+        </FormItem>
+        <FormItem label="手机号码" prop="phone" style="width: calc(50% - 10px)">
+          <Input v-model="areaInfo.phone" placeholder="请输入手机号码"></Input>
+        </FormItem>
+        <FormItem
+          label="短信验证码"
+          prop="code"
+          style="width: calc(50% - 10px)"
+        >
+          <Input
+            style="width: calc(100% - 102px)"
+            v-model="areaInfo.code"
+            placeholder="请输入短信验证码"
+          ></Input>
+          <div class="code_btn disabled">获取验证码</div>
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button @click="areaInfo.show = false">取消</Button>
+        <Button @click="saveAddInfo()" type="primary">保存</Button>
+      </div>
+    </Modal>
+    <!-- 查看 -->
+    <Modal
+      class="modal1"
+      :mask-closable="false"
+      v-model="viewInfo.show"
+      title="查看"
+    >
+      <div class="view_title">河南星火燎原软件科技有限公司</div>
+      <Table
+        style="border: 1px solid #e8eaec; border-bottom: none"
+        :columns="viewInfo.columns"
+        :data="viewInfo.list"
+      ></Table>
+      <div slot="footer" style="text-align: center">
+        <Button @click="viewInfo.show = false">关闭</Button>
+      </div>
+    </Modal>
+  </div>
 </template>
 
 <script>
+import CustomTree from "@/components/CustomTree/CustomTree.vue";
+import { date_format } from "@/utils";
 export default {
+  components: {
+    CustomTree
+  },
   data() {
-    return {};
+    return {
+      date_format,
+      searchForm: {
+        showDrop: false,
+        dropList: [],
+        areaname: "",
+        areaid: null,
+        page: 1,
+        size: 10,
+        list: [],
+        total: 0
+      },
+      // 新建/编辑
+      areaInfo: {
+        show: false,
+        id: null,
+        areaname: "",
+        admin: "",
+        loginname: "",
+        pwd: "",
+        pwd1: "",
+        phone: "",
+        code: ""
+      },
+      // 查看
+      viewInfo: {
+        show: false,
+        areaname: "",
+        list: [],
+        columns: [
+          {
+            title: "序号",
+            type: "index",
+            width: 70,
+            align: "center"
+          },
+          {
+            title: "名称",
+            key: "admin",
+            align: "center"
+          },
+          {
+            title: "账号",
+            key: "loginname",
+            align: "center"
+          },
+          {
+            title: "手机号码",
+            key: "phone",
+            align: "center"
+          }
+        ]
+      },
+      rules: {
+        areaname: [
+          {
+            required: true,
+            message: "请输入区域名称",
+            trigger: "blur"
+          }
+        ],
+        admin: [
+          {
+            required: true,
+            message: "请输入管理员名称",
+            trigger: "blur"
+          }
+        ],
+        loginname: [
+          {
+            required: true,
+            message: "请输入请输入登录账号",
+            trigger: "blur"
+          }
+        ],
+        pwd: [
+          {
+            required: true,
+            message: "请输入密码",
+            trigger: "blur"
+          }
+        ],
+        pwd1: [
+          {
+            required: true,
+            message: "请输入确认密码",
+            trigger: "blur"
+          }
+        ]
+      },
+      columns: [
+        {
+          title: "序号",
+          align: "center",
+          width: 70,
+          render: (h, params) => {
+            return h(
+              "span",
+              params.index +
+                (this.searchForm.page - 1) * this.searchForm.size +
+                1
+            );
+          }
+        },
+        {
+          title: "区域名称",
+          key: "areaname",
+          align: "center"
+        },
+        {
+          title: "创建人",
+          key: "createname",
+          width: 140,
+          align: "center"
+        },
+        {
+          title: "创建时间",
+          slot: "createtimeSlot",
+          width: 190,
+          align: "center"
+        },
+        {
+          title: "操作人",
+          key: "updatename",
+          width: 140,
+          align: "center"
+        },
+        {
+          title: "操作时间",
+          slot: "updatetimeSlot",
+          width: 190,
+          align: "center"
+        },
+        {
+          title: "操作",
+          slot: "actionSlot",
+          width: 220,
+          align: "center"
+        }
+      ]
+    };
+  },
+  created() {
+    this.searchList();
   },
-  methods: {}
+  methods: {
+    // 区域选择改变
+    searchAreaChange() {},
+    // 搜索
+    searchList() {
+      this.searchForm.page = 1;
+      this.getList();
+    },
+    // 页码改变
+    pageChange(page) {
+      this.searchForm.page = page;
+      this.getList();
+    },
+    // 每页显示数量改变
+    pageSizeChange(size) {
+      this.searchForm.size = size;
+      this.searchForm.page = 1;
+      this.getList();
+    },
+    // 获取列表
+    getList() {
+      this.searchForm.list = [
+        {
+          id: 1,
+          areaname: "区域一",
+          createname: "区域一",
+          createtime: 1710838418,
+          updatename: "区域一",
+          updatetime: 1710838430
+        },
+        {
+          id: 2,
+          areaname: "区域二",
+          createname: "区域一",
+          createtime: 1710838418,
+          updatename: "区域一",
+          updatetime: 1710838430
+        },
+        {
+          id: 3,
+          areaname: "区域三",
+          createname: "区域一",
+          createtime: 1710838418,
+          updatename: "区域一",
+          updatetime: 1710838430
+        }
+      ];
+      this.searchForm.total = 3;
+    },
+    // 新建
+    toAdd() {
+      this.areaInfo.show = true;
+      this.areaInfo.areaname = "";
+      this.areaInfo.admin = "";
+      this.areaInfo.loginname = "";
+      this.areaInfo.pwd = "";
+      this.areaInfo.pwd1 = "";
+      this.areaInfo.phone = "";
+      this.areaInfo.code = "";
+    },
+    // 保存新建
+    saveAddInfo() {
+      this.areaInfo.show = false;
+    },
+    // 查看
+    toView() {
+      this.viewInfo.show = true;
+      this.viewInfo.areaname = "河南星火燎原软件科技有限公司";
+      this.viewInfo.list = [
+        {
+          admin: "周文彦",
+          loginname: "zhouwenyan@xhkjedu.com",
+          phone: "15610230213"
+        },
+        {
+          admin: "齐思宇",
+          loginname: "zhouwenyan@xhkjedu.com",
+          phone: "15610230213"
+        }
+      ];
+    },
+    // 编辑
+    toEdit(row) {
+      this.areaInfo.show = true;
+      this.areaInfo.id = row.id;
+    },
+    // 删除
+    toDel() {
+      this.$Modal.confirm({
+        title: "提示",
+        content: "您确定删除选中数据吗？",
+        onOk: () => {},
+        onCancel: () => {}
+      });
+    }
+  }
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.search_header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 16px 16px;
+  .search_left {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    .search_drop {
+      margin-right: 10px;
+      width: 200px;
+    }
+  }
+}
+.code_btn {
+  display: inline-block;
+  margin-left: 10px;
+  padding: 0 10px;
+  color: #339dff;
+  line-height: 30px;
+  border: 1px solid #339dff;
+  border-radius: 6px;
+  background-color: #fff;
+  cursor: pointer;
+  &.disabled {
+    color: #c5c8ce;
+    background-color: #f7f7f7;
+    border-color: #dcdee2;
+    cursor: not-allowed;
+  }
+}
+.view_title {
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: bold;
+  text-align: center;
+}
+</style>

src/views/platformSection/regionManage/regionManage.vue

@@ -45,19 +45,19 @@
     <Modal
       class="modal1"
       :mask-closable="false"
-      v-model="addInfo.show"
-      title="新建"
+      v-model="areaInfo.show"
+      :title="areaInfo.id ? '编辑' : '新建'"
     >
       <Form
         ref="addForm"
-        :model="addInfo"
+        :model="areaInfo"
         :rules="rules"
         :label-width="100"
         inline
       >
         <FormItem label="区域名称" prop="areaname" style="width: 100%">
           <Input
-            v-model="addInfo.areaname"
+            v-model="areaInfo.areaname"
             placeholder="请输入区域名称"
           ></Input>
         </FormItem>
@@ -66,7 +66,10 @@
           prop="admin"
           style="width: calc(50% - 10px)"
         >
-          <Input v-model="addInfo.admin" placeholder="请输入管理员名称"></Input>
+          <Input
+            v-model="areaInfo.admin"
+            placeholder="请输入管理员名称"
+          ></Input>
         </FormItem>
         <FormItem
           label="登录账号"
@@ -74,32 +77,54 @@
           style="width: calc(50% - 10px)"
         >
           <Input
-            v-model="addInfo.loginname"
+            v-model="areaInfo.loginname"
             placeholder="请输入登录账号"
           ></Input>
         </FormItem>
         <FormItem label="密码" prop="pwd" style="width: calc(50% - 10px)">
-          <Input v-model="addInfo.pwd" placeholder="请输入密码"></Input>
+          <Input v-model="areaInfo.pwd" placeholder="请输入密码"></Input>
         </FormItem>
         <FormItem label="确认密码" prop="pwd1" style="width: calc(50% - 10px)">
-          <Input v-model="addInfo.pwd1" placeholder="请输入确认密码"></Input>
+          <Input v-model="areaInfo.pwd1" placeholder="请输入确认密码"></Input>
         </FormItem>
         <FormItem label="手机号码" prop="phone" style="width: calc(50% - 10px)">
-          <Input v-model="addInfo.phone" placeholder="请输入手机号码"></Input>
+          <Input v-model="areaInfo.phone" placeholder="请输入手机号码"></Input>
         </FormItem>
         <FormItem
           label="短信验证码"
           prop="code"
           style="width: calc(50% - 10px)"
         >
-          <Input v-model="addInfo.code" placeholder="请输入短信验证码"></Input>
+          <Input
+            style="width: calc(100% - 102px)"
+            v-model="areaInfo.code"
+            placeholder="请输入短信验证码"
+          ></Input>
+          <div class="code_btn disabled">获取验证码</div>
         </FormItem>
       </Form>
       <div slot="footer">
-        <Button @click="addInfo.show = false">取消</Button>
+        <Button @click="areaInfo.show = false">取消</Button>
         <Button @click="saveAddInfo()" type="primary">保存</Button>
       </div>
     </Modal>
+    <!-- 查看 -->
+    <Modal
+      class="modal1"
+      :mask-closable="false"
+      v-model="viewInfo.show"
+      title="查看"
+    >
+      <div class="view_title">河南星火燎原软件科技有限公司</div>
+      <Table
+        style="border: 1px solid #e8eaec; border-bottom: none"
+        :columns="viewInfo.columns"
+        :data="viewInfo.list"
+      ></Table>
+      <div slot="footer" style="text-align: center">
+        <Button @click="viewInfo.show = false">关闭</Button>
+      </div>
+    </Modal>
   </div>
 </template>
 
@@ -116,8 +141,10 @@ export default {
         list: [],
         total: 0
       },
-      addInfo: {
+      // 新建/编辑
+      areaInfo: {
         show: false,
+        id: null,
         areaname: "",
         admin: "",
         loginname: "",
@@ -126,6 +153,35 @@ export default {
         phone: "",
         code: ""
       },
+      // 查看
+      viewInfo: {
+        show: false,
+        areaname: "",
+        list: [],
+        columns: [
+          {
+            title: "序号",
+            type: "index",
+            width: 70,
+            align: "center"
+          },
+          {
+            title: "名称",
+            key: "admin",
+            align: "center"
+          },
+          {
+            title: "账号",
+            key: "loginname",
+            align: "center"
+          },
+          {
+            title: "手机号码",
+            key: "phone",
+            align: "center"
+          }
+        ]
+      },
       rules: {
         areaname: [
           {
@@ -267,27 +323,57 @@ export default {
     },
     // 新建
     toAdd() {
-      this.addInfo.show = true;
-      this.addInfo.areaname = "";
-      this.addInfo.admin = "";
-      this.addInfo.loginname = "";
-      this.addInfo.pwd = "";
-      this.addInfo.pwd1 = "";
-      this.addInfo.phone = "";
-      this.addInfo.code = "";
+      this.areaInfo.show = true;
+      this.areaInfo.areaname = "";
+      this.areaInfo.admin = "";
+      this.areaInfo.loginname = "";
+      this.areaInfo.pwd = "";
+      this.areaInfo.pwd1 = "";
+      this.areaInfo.phone = "";
+      this.areaInfo.code = "";
     },
     // 保存新建
     saveAddInfo() {
-      this.addInfo.show = false;
+      this.areaInfo.show = false;
     },
     // 进入
-    toEnter() {},
+    toEnter() {
+      this.$router.push({
+        path: "/region/home",
+        query: {}
+      });
+    },
     // 查看
-    toView() {},
+    toView() {
+      this.viewInfo.show = true;
+      this.viewInfo.areaname = "河南星火燎原软件科技有限公司";
+      this.viewInfo.list = [
+        {
+          admin: "周文彦",
+          loginname: "zhouwenyan@xhkjedu.com",
+          phone: "15610230213"
+        },
+        {
+          admin: "齐思宇",
+          loginname: "zhouwenyan@xhkjedu.com",
+          phone: "15610230213"
+        }
+      ];
+    },
     // 编辑
-    toEdit() {},
+    toEdit(row) {
+      this.areaInfo.show = true;
+      this.areaInfo.id = row.id;
+    },
     // 删除
-    toDel() {}
+    toDel() {
+      this.$Modal.confirm({
+        title: "提示",
+        content: "您确定删除选中数据吗？",
+        onOk: () => {},
+        onCancel: () => {}
+      });
+    }
   }
 };
 </script>
@@ -299,4 +385,27 @@ export default {
   align-items: center;
   margin: 16px 16px;
 }
+.code_btn {
+  display: inline-block;
+  margin-left: 10px;
+  padding: 0 10px;
+  color: #339dff;
+  line-height: 30px;
+  border: 1px solid #339dff;
+  border-radius: 6px;
+  background-color: #fff;
+  cursor: pointer;
+  &.disabled {
+    color: #c5c8ce;
+    background-color: #f7f7f7;
+    border-color: #dcdee2;
+    cursor: not-allowed;
+  }
+}
+.view_title {
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: bold;
+  text-align: center;
+}
 </style>

src/views/regionSection/index.vue

@@ -52,6 +52,7 @@
           <span>公告</span>
         </router-link>
       </div>
+      <div class="out_region" @click="exitToPreviousLevel()">退出区域</div>
     </div>
     <div class="section_main">
       <router-view></router-view>
@@ -84,11 +85,16 @@ export default {
     }
   },
   methods: {
+    // 选中菜单后隐藏下拉
     routeDropdownChange() {
       this.routeDropdown = false;
       setTimeout(() => {
         this.routeDropdown = true;
       }, 500);
+    },
+    // 退出到上一级
+    exitToPreviousLevel() {
+      this.$router.push("/platform/home");
     }
   }
 };
@@ -101,7 +107,7 @@ export default {
   overflow: auto;
   .section_header {
     display: flex;
-    justify-content: flex-start;
+    justify-content: space-between;
     align-items: center;
     margin: 10px 16px;
     padding: 13px 20px;
@@ -179,6 +185,11 @@ export default {
         }
       }
     }
+    .out_region {
+      line-height: 32px;
+      font-size: 16px;
+      cursor: pointer;
+    }
   }
   .section_main {
     position: relative;

src/views/schoolSection/index.vue

@@ -6,6 +6,7 @@
           <span>首页</span>
         </router-link>
       </div>
+      <div class="out_region" @click="exitToPreviousLevel()">退出学校</div>
     </div>
     <div class="section_main">
       <router-view></router-view>
@@ -21,11 +22,16 @@ export default {
     };
   },
   methods: {
+    // 选中菜单后隐藏下拉
     routeDropdownChange() {
       this.routeDropdown = false;
       setTimeout(() => {
         this.routeDropdown = true;
       }, 500);
+    },
+    // 退出到上一级
+    exitToPreviousLevel() {
+      this.$router.push("/region/home");
     }
   }
 };
@@ -38,7 +44,7 @@ export default {
   overflow: auto;
   .section_header {
     display: flex;
-    justify-content: flex-start;
+    justify-content: space-between;
     align-items: center;
     margin: 10px 16px;
     padding: 13px 20px;
@@ -116,6 +122,11 @@ export default {
         }
       }
     }
+    .out_region {
+      line-height: 32px;
+      font-size: 16px;
+      cursor: pointer;
+    }
   }
   .section_main {
     position: relative;