平台管控-区域管控

package-lock.json

 {
-  "name": "xhkj_bi",
+  "name": "xh_control",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,

package.json

 {
-  "name": "xhkj_bi",
+  "name": "xh_control",
   "version": "1.0.0",
   "private": true,
   "scripts": {

src/assets/less/common.less

     > div {
       margin: 0 4px;
       padding: 0 4px;
+      cursor: pointer;
     }
   }
 }

src/assets/less/customModal.less

   overflow: hidden;
   .ivu-modal-header {
     padding: 13px 16px !important;
-    border-bottom: none;
+    border-bottom-color: #ced9f2;
     // 设置弥散渐变
     // background-image: url("~@/assets/img/dispersion_gradient1.png");
     // background-size: cover;
     // background-repeat: no-repeat;
     // background-position: center;
     .ivu-modal-header-inner {
-      font-size: 16px !important;
-      color: #253A70;
+      font-size: 18px !important;
+      color: #253a70;
     }
   }
   .ivu-modal-close {
     top: 4px;
     .ivu-icon-ios-close:before {
-      color: #253A70;
+      color: #253a70;
       font-size: 36px;
       font-weight: 600;
     }
   }
   .ivu-modal-footer {
     border-top: none;
-
   }
 }
 

src/views/platformSection/regionManage/regionManage.vue

         @on-search="searchList()"
         style="width: 150px"
       />
-      <Button type="primary" class="primary_btn">新建</Button>
+      <Button type="primary" class="primary_btn" @click="toAdd()">新建</Button>
     </div>
     <div class="table_wrap">
       <Table :columns="columns" :data="searchForm.list">
         show-sizer
       ></Page>
     </div>
+    <!-- 新建 -->
+    <Modal
+      class="modal1"
+      :mask-closable="false"
+      v-model="addInfo.show"
+      title="新建"
+    >
+      <Form
+        ref="addForm"
+        :model="addInfo"
+        :rules="rules"
+        :label-width="100"
+        inline
+      >
+        <FormItem label="区域名称" prop="areaname" style="width: 100%">
+          <Input
+            v-model="addInfo.areaname"
+            placeholder="请输入区域名称"
+          ></Input>
+        </FormItem>
+        <FormItem
+          label="管理员名称"
+          prop="admin"
+          style="width: calc(50% - 10px)"
+        >
+          <Input v-model="addInfo.admin" placeholder="请输入管理员名称"></Input>
+        </FormItem>
+        <FormItem
+          label="登录账号"
+          prop="loginname"
+          style="width: calc(50% - 10px)"
+        >
+          <Input
+            v-model="addInfo.loginname"
+            placeholder="请输入登录账号"
+          ></Input>
+        </FormItem>
+        <FormItem label="密码" prop="pwd" style="width: calc(50% - 10px)">
+          <Input v-model="addInfo.pwd" placeholder="请输入密码"></Input>
+        </FormItem>
+        <FormItem label="确认密码" prop="pwd1" style="width: calc(50% - 10px)">
+          <Input v-model="addInfo.pwd1" placeholder="请输入确认密码"></Input>
+        </FormItem>
+        <FormItem label="手机号码" prop="phone" style="width: calc(50% - 10px)">
+          <Input v-model="addInfo.phone" placeholder="请输入手机号码"></Input>
+        </FormItem>
+        <FormItem
+          label="短信验证码"
+          prop="code"
+          style="width: calc(50% - 10px)"
+        >
+          <Input v-model="addInfo.code" placeholder="请输入短信验证码"></Input>
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button @click="addInfo.show = false">取消</Button>
+        <Button @click="saveAddInfo()" type="primary">保存</Button>
+      </div>
+    </Modal>
   </div>
 </template>
 
         list: [],
         total: 0
       },
+      addInfo: {
+        show: false,
+        areaname: "",
+        admin: "",
+        loginname: "",
+        pwd: "",
+        pwd1: "",
+        phone: "",
+        code: ""
+      },
+      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: "序号",
     this.searchList();
   },
   methods: {
+    // 搜索
     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 = [
         {
       ];
       this.searchForm.total = 3;
     },
+    // 新建
+    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 = "";
+    },
+    // 保存新建
+    saveAddInfo() {
+      this.addInfo.show = false;
+    },
+    // 进入
     toEnter() {},
+    // 查看
     toView() {},
+    // 编辑
     toEdit() {},
+    // 删除
     toDel() {}
   }
 };