27141

project/sass/apps/AppCommunityManage/components/Add.vue

@@ -5,24 +5,23 @@
                 :isShowBottomBorder="true"></ai-title>
     </template>
     <template slot="content">
-      <div class="add-form">
-        <ai-bar title="基础信息"></ai-bar>
-        <el-form label-width="110px" style="padding-bottom: 80px;" :model="form" ref="form">
-          <el-form-item label="小区名称" prop="communityName"
+      <ai-card title="基础信息">
+        <el-form class="ai-form" slot="content" label-width="110px" style="padding-bottom: 80px;" :model="form" ref="form">
+          <el-form-item style="width: 100%;" label="小区名称" prop="communityName"
                         :rules="[{ required: true, message: '请输入小区名称', trigger: 'blur' }]">
             <el-input size="small" v-model="form.communityName" :maxlength="50" placeholder="请输入小区名称"></el-input>
           </el-form-item>
-          <el-form-item label="行政归属" prop="areaId" :rules="[
+          <el-form-item style="width: 100%;" label="行政归属" prop="areaId" :rules="[
               { required: true, message: '请选择行政归属', trigger: 'blur' },
               { pattern:/[^0]0{0,2}$/g, message: '请选择到村/社区' }]">
             <ai-area-get :instance="instance" v-model="form.areaId" :root="user.info.areaId"
                          @select="handleAreaSelect"/>
           </el-form-item>
-          <el-form-item label="小区地址" prop="address" :rules="[{ required: true, message: '请输入小区地址', trigger: 'blur' }]">
+          <el-form-item style="width: 100%;" label="小区地址" prop="address" :rules="[{ required: true, message: '请输入小区地址', trigger: 'blur' }]">
             <el-input size="small" v-model="form.address" placeholder="请输入小区地址" clearable/>
           </el-form-item>
 
-          <el-form-item label="所属网格" prop="girdInfoList" style="margin-top: 8px;"
+          <el-form-item style="width: 100%;" label="所属网格" prop="girdInfoList"
                         :rules="[{ required: true, message: '请选择所属网格', trigger: 'blur' }]">
             <el-tag
                 :key="index"
@@ -36,7 +35,7 @@
             <el-button size="small" @click="showGrid=true">选择网格</el-button>
           </el-form-item>
         </el-form>
-      </div>
+      </ai-card>
       <ai-dialog title="选择网格" :visible.sync="showGrid" :customFooter="true" :destroyOnClose="true"
                  @opened="beforeSelectTree" border width="720px">
         <div class="grid">
@@ -125,16 +124,30 @@ export default {
   methods: {
     beforeSelectTree() {
       this.treeObj.checkedKeys = [];
-      this.instance.post(`/app/appgirdinfo/listAll`, null, null).then((res) => {
+      this.instance.post(`/app/appgirdinfo/listAll`).then((res) => {
         if (res.code == 0) {
-          this.treeObj.treeList = res.data;
+          this.treeObj.treeList = this.format(res.data)
           if (this.form.girdInfoList.length) {
             this.form.girdInfoList.map((e) => {
-              this.treeObj.checkedKeys.push(e.id);
-            });
+              this.treeObj.checkedKeys.push(e.id)
+            })
           }
         }
-      });
+      })
+    },
+
+    format (list) {
+      return list.map(item => {
+        if (item.girdLevel !== '2') {
+          item.disabled = true
+        }
+
+        if (item.girdList && item.girdList.length) {
+          item.girdList = this.format(item.girdList)
+        }
+
+        return item
+      })
     },
 
     onCheckChange (e) {
@@ -212,65 +225,9 @@ export default {
 
 <style lang="scss" scoped>
 .add-detail {
-  height: 100%;
-  overflow: hidden;
-  background: #f2f4f6 !important;
-
-  .add-form__item {
-    display: flex;
-    align-items: center;
-  }
-
-  ::v-deep .el-form-item__label {
-    padding-right: 40px;
-  }
-
-  ::v-deep .ai-detail__footer {
-    background: #fff !important;
-  }
-
-  ::v-deep .ai-detail__content--active {
-    padding: 20px;
-
-    .ai-detail__content--wrapper {
-      width: 100%;
-    }
-
-    .aibar {
-      padding: 0 16px;
-    }
-
-    .el-form {
-      padding: 0 96px 0 50px;
-    }
-
-    .add-form {
-      background: #fff;
-    }
-  }
-
-  ::v-deep .ai-wrapper {
-    align-items: inherit !important;
-  }
-
-  .user-wrapper {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .avatar {
-    width: 100px;
-    height: 100px;
-    object-fit: contain;
-    border-radius: 10px;
-  }
 
   .footer-btn {
     width: 130px;
   }
-
-  .el-form {
-    padding-bottom: 80px;
-  }
 }
 </style>