From 8fe222ba4ba175ddd0a6400a5cba9e2b45a14353 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Sat, 26 Mar 2022 15:34:50 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B5=B0=E8=AE=BF=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jianping/AppAssessment/AppAssessment.vue  |  42 +-
 .../AppGridMember/AppGridMemberJp.vue         | 126 ++++
 .../AppGridMember/components/ApplyAdd.vue     | 107 ++++
 .../AppGridMember/components/ApplyDetail.vue  |  65 +++
 .../AppGridMember/components/ApplyList.vue    | 179 ++++++
 .../AppGridMember/components/Family.vue       | 499 ++++++++++++++++
 .../AppGridMember/components/MonitorUser.vue  | 498 ++++++++++++++++
 .../jianping/AppGridMember/components/add.vue | 543 ++++++++++++++++++
 .../AppGridMember/components/list.vue         | 206 +++++++
 9 files changed, 2259 insertions(+), 6 deletions(-)
 create mode 100644 packages/jianping/AppGridMember/AppGridMemberJp.vue
 create mode 100644 packages/jianping/AppGridMember/components/ApplyAdd.vue
 create mode 100644 packages/jianping/AppGridMember/components/ApplyDetail.vue
 create mode 100644 packages/jianping/AppGridMember/components/ApplyList.vue
 create mode 100644 packages/jianping/AppGridMember/components/Family.vue
 create mode 100644 packages/jianping/AppGridMember/components/MonitorUser.vue
 create mode 100644 packages/jianping/AppGridMember/components/add.vue
 create mode 100644 packages/jianping/AppGridMember/components/list.vue

diff --git a/packages/jianping/AppAssessment/AppAssessment.vue b/packages/jianping/AppAssessment/AppAssessment.vue
index 1af6b8ad..9e02d2fb 100644
--- a/packages/jianping/AppAssessment/AppAssessment.vue
+++ b/packages/jianping/AppAssessment/AppAssessment.vue
@@ -1,7 +1,7 @@
 <template>
   <ai-list class="AppAssessment">
     <template slot="title">
-      <ai-title title="工作考核" isShowBottomBorder :isShowArea="true" v-model="search.areaId" :instance="instance" @change="getList"></ai-title>
+      <ai-title title="工作考核" isShowBottomBorder :hideLevel="hideLevel" :isShowArea="true" v-model="search.areaId" :instance="instance" @change="getList"></ai-title>
     </template>
     <template slot="content">
       <div class="statistics-top">
@@ -52,19 +52,45 @@
         <template #content>
           <ai-search-bar bottomBorder>
             <template #left>
+              <el-date-picker
+                value-format="yyyy-MM-dd"
+                v-model="search.createTimeStart"
+                type="date"
+                size="small"
+                unlink-panels
+                placeholder="请选择开始日期"
+                @change="search.current = 1, getList()" />
+              <el-date-picker
+                value-format="yyyy-MM-dd"
+                v-model="search.createTimeEnd"
+                type="date"
+                size="small"
+                unlink-panels
+                placeholder="请选择结束日期"
+                @change="search.current = 1, getList()" />
               <ai-select
                 v-model="search.riskType"
                 clearable
-                placeholder="请选择风险类型"
+                placeholder="请选择是否关联网格"
                 :selectList="dict.getDict('fpRiskType')"
                 @change="search.current = 1, getList()">
               </ai-select>
+              <ai-select
+                v-model="search.riskType"
+                clearable
+                placeholder="请选择走访次数"
+                :selectList="dict.getDict('fpRiskType')"
+                @change="search.current = 1, getList()">
+              </ai-select>
+              <ai-download :instance="instance" url="/app/apppreventionreturntopovertyriskperson/export" :params="search" fileName="帮扶走访" :disabled="tableData.length == 0">
+                <el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
+              </ai-download>
             </template>
             <template #right>
               <el-input
                 v-model="search.name"
                 size="small"
-                placeholder="姓名/风险说明/操作人"
+                placeholder="户主姓名/身份证号/网格员"
                 clearable
                 v-throttle="() => {search.current = 1, getList()}"
                 @clear="search.current = 1, search.name = '', getList()"
@@ -76,6 +102,8 @@
             :tableData="tableData"
             :col-configs="colConfigs"
             :total="total"
+            tableSize="small"
+            border
             style="margin-top: 12px;"
             :current.sync="search.current"
             :size.sync="search.size"
@@ -98,7 +126,7 @@
   import { mapState } from 'vuex'
   export default {
     name: 'AppAssessment',
-
+    label: '工作考核',
     props: {
       instance: Function,
       dict: Object
@@ -117,6 +145,7 @@
         },
         ids: [],
         total: 10,
+        hideLevel: 3,
         tableData: []
       }
     },
@@ -137,6 +166,7 @@
 
     created () {
       this.search.areaId = this.user.info.areaId
+      this.hideLevel = this.user.info.areaList.length
       this.dict.load('epidemicRecentTestResult').then(() => {
         this.getList()
       })
@@ -209,12 +239,12 @@
         }
 
         .progress-wrapper {
-          height: 190px;
-          overflow: hidden;
         }
 
         .progress {
           overflow-y: auto;
+          height: 190px;
+
           .item {
             display: flex;
             align-items: center;
diff --git a/packages/jianping/AppGridMember/AppGridMemberJp.vue b/packages/jianping/AppGridMember/AppGridMemberJp.vue
new file mode 100644
index 00000000..5025af75
--- /dev/null
+++ b/packages/jianping/AppGridMember/AppGridMemberJp.vue
@@ -0,0 +1,126 @@
+<template>
+  <ai-list class="AppGridMember" v-if="!isShowDetail">
+    <template slot="title">
+      <ai-title title="网格员管理" :isShowBottomBorder="false"></ai-title>
+    </template>
+    <template slot="tabs">
+      <el-tabs v-model="currIndex">
+        <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label">
+          <component :ref="String(i)" v-if="currIndex == i" :is="tab.comp" @change="onChange" lazy :instance="instance" :dict="dict" :permissions="permissions"/>
+        </el-tab-pane>
+      </el-tabs>
+    </template>
+  </ai-list>
+  <Add v-else-if="component === 'Add'" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></Add>
+  <Family v-else-if="component === 'Family'" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></Family>
+  <MonitorUser v-else-if="component === 'MonitorUser'" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></MonitorUser>
+  <ApplyDetail v-else-if="component === 'ApplyDetail'" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></ApplyDetail>
+  <ApplyAdd v-else-if="component === 'ApplyAdd'" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></ApplyAdd>
+</template>
+
+<script>
+  import List from './components/list'
+  import ApplyList from './components/ApplyList'
+  import Add from './components/add'
+  import ApplyDetail from './components/ApplyDetail'
+  import ApplyAdd from './components/ApplyAdd'
+  import Family from './components/Family'
+  import MonitorUser from './components/MonitorUser'
+
+  export default {
+    name: "AppGridMemberJp",
+    label: "网格管理员",
+
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function
+    },
+
+    data() {
+      return {
+        component: "List",
+        params: {},
+        include: [],
+        currIndex: '0',
+        isShowDetail: false
+      };
+    },
+
+      computed: {
+        tabs () {
+          const tabList = [
+            {label: '网格员信息', name: 'List', comp: List, permission: ''},
+            {label: '申报信息', name: 'ApplyList', comp: ApplyList, permission: 'app_appgirdmemberapply_detail'}
+          ].filter(item => {
+            return item.name !== 'ApplyList' || this.permissions(item.permission)
+          })
+
+          return tabList
+        }
+      },
+
+    components: {
+      Add,
+      List,
+      Family,
+      ApplyList,
+      ApplyDetail,
+      MonitorUser,
+      ApplyAdd
+    },
+
+    mounted() {},
+
+    methods: {
+      onChange(data) {
+        if (data.type === "Add") {
+          this.component = "Add"
+          this.isShowDetail = true
+          this.params = data.params
+        }
+
+        if (data.type === "Family") {
+          this.component = "Family"
+          this.isShowDetail = true
+          this.params = data.params
+        }
+
+        if (data.type === "MonitorUser") {
+          this.component = "MonitorUser"
+          this.isShowDetail = true
+          this.params = data.params
+        }
+        if (data.type === "ApplyDetail") {
+          this.component = "ApplyDetail"
+          this.isShowDetail = true
+          this.params = data.params
+        }
+
+        if (data.type === "ApplyAdd") {
+          this.component = "ApplyAdd"
+          this.isShowDetail = true
+          this.params = data.params
+        }
+
+        if (data.type === "list") {
+          this.component = "List"
+          this.isShowDetail = false
+          this.params = data.params
+        }
+
+        if (data.type === "ApplyList") {
+          this.component = "ApplyList"
+          this.isShowDetail = false
+          this.params = data.params
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .AppGridMember {
+    height: 100%;
+  }
+</style>
diff --git a/packages/jianping/AppGridMember/components/ApplyAdd.vue b/packages/jianping/AppGridMember/components/ApplyAdd.vue
new file mode 100644
index 00000000..c2906b86
--- /dev/null
+++ b/packages/jianping/AppGridMember/components/ApplyAdd.vue
@@ -0,0 +1,107 @@
+<template>
+  <ai-detail class="content-add">
+    <template slot="title">
+      <ai-title :title="params.id ? '编辑' : '添加'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      </ai-title>
+    </template>
+    <template slot="content">
+      <ai-card title="基本信息">
+        <template #content>
+          <el-form class="ai-form" :model="form" label-width="120px" ref="form">
+            <el-form-item label="姓名" style="width: 100%;" prop="name" :rules="[{required: true, message: '请输入姓名', trigger: 'blur'}]">
+              <el-input size="small" v-model="form.name" placeholder="请输入..." :maxlength="20"></el-input>
+            </el-form-item>
+            <el-form-item label="联系电话" style="width: 100%;" prop="phone" :rules="[{required: true, message: '请输入联系电话', trigger: 'blur'}]">
+              <el-input size="small" v-model="form.phone" placeholder="请输入..." :maxlength="11"></el-input>
+            </el-form-item>
+            <el-form-item label="网格名称" style="width: 100%;" prop="girdName" :rules="[{required: true, message: '请输入网格名称', trigger: 'blur'}]">
+              <el-input size="small" v-model="form.girdName" placeholder="请输入..." :maxlength="50"></el-input>
+            </el-form-item>
+          </el-form>
+        </template>
+      </ai-card>
+    </template>
+    <template #footer>
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" :loading="isLoading" @click="confirm">提交</el-button>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+  export default {
+    name: 'ApplyAdd',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object
+    },
+
+    data () {
+      return {
+        form: {
+          name: '',
+          phone: '',
+          gridName: ''
+        },
+        isLoading: false,
+        id: ''
+      }
+    },
+
+    created () {
+      if (this.params && this.params.id) {
+        this.id = this.params.id
+        this.getInfo(this.params.id)
+      }
+    },
+
+    methods: {
+      getInfo (id) {
+        this.instance.post(`/app/appcontentinfo/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.form = res.data
+          }
+        })
+      },
+
+      onChange () {
+        this.form.files = []
+      },
+
+      confirm () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.isLoading = true
+            this.instance.post(`/app/appgirdmemberapply/addOrUpdate`, {
+              ...this.form,
+              id: this.params.id || ''
+            }).then(res => {
+              if (res.code == 0) {
+                this.$message.success('提交成功')
+                setTimeout(() => {
+                  this.cancel(true)
+                }, 600)
+              } else {
+                this.isLoading = false
+              }
+            }).catch(() => {
+              this.isLoading = false
+            })
+          }
+        })
+      },
+
+      cancel (isRefresh) {
+        this.$emit('change', {
+          type: 'list',
+          isRefresh: !!isRefresh
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/packages/jianping/AppGridMember/components/ApplyDetail.vue b/packages/jianping/AppGridMember/components/ApplyDetail.vue
new file mode 100644
index 00000000..e50a258a
--- /dev/null
+++ b/packages/jianping/AppGridMember/components/ApplyDetail.vue
@@ -0,0 +1,65 @@
+<template>
+  <ai-detail>
+    <template slot="title">
+      <ai-title title="详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      </ai-title>
+    </template>
+    <template slot="content">
+      <ai-card title="基本信息">
+        <template #content>
+          <ai-wrapper>
+            <ai-info-item label="姓名" isLine :value="info.name"></ai-info-item>
+            <ai-info-item label="联系电话" isLine :value="info.phone"></ai-info-item>
+            <ai-info-item label="网格名称" isLine :value="info.girdName"></ai-info-item>
+          </ai-wrapper>
+        </template>
+      </ai-card>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+  export default {
+    name: 'ApplyDetail',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object
+    },
+
+    data () {
+      return {
+        info: {},
+        id: ''
+      }
+    },
+
+    created () {
+      if (this.params && this.params.id) {
+        this.id = this.params.id
+        this.getInfo(this.params.id)
+      }
+    },
+
+    methods: {
+      getInfo (id) {
+        this.instance.post(`/app/appgirdmemberapply/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.info = res.data
+          }
+        })
+      },
+
+      cancel (isRefresh) {
+        this.$emit('change', {
+          type: 'ApplyList',
+          isRefresh: !!isRefresh
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/packages/jianping/AppGridMember/components/ApplyList.vue b/packages/jianping/AppGridMember/components/ApplyList.vue
new file mode 100644
index 00000000..ef3a43fd
--- /dev/null
+++ b/packages/jianping/AppGridMember/components/ApplyList.vue
@@ -0,0 +1,179 @@
+<template>
+  <ai-list class="list" isTabs>
+    <template slot="content">
+      <ai-search-bar bottomBorder>
+        <template slot="left">
+          <el-button
+            icon="iconfont iconAdd"
+            type="primary"
+            size="small"
+            @click="add('')">添加</el-button>
+          <el-button
+            icon="iconfont iconDelete"
+            @click="deleteById(ids.join(','))"
+            :disabled="!Boolean(ids.length)">
+            删除
+          </el-button>
+          <ai-import :instance="instance" :dict="dict" type="appgirdmemberapply" name="网格员申报" @success="getList()">
+            <el-button icon="iconfont iconImport">导入</el-button>
+          </ai-import>
+        </template>
+        <template slot="right">
+          <el-input
+            v-model="searchObj.name"
+            size="small"
+            placeholder="网格员/责任网格"
+            @keyup.enter.native="(page.current = 1), getList()"
+            clearable
+            @clear="(searchObj.name = '', page.current = 1), getList()"
+            suffix-icon="iconfont iconSearch" />
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="page.total"
+        ref="aitableex"
+        :current.sync="page.current"
+        :size.sync="page.size"
+        @selection-change="(v) => (ids = v.map((e) => e.id))"
+        @getList="getList()">
+        <el-table-column label="操作" slot="options" align="center" fixed="right" width="120">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="toDetail(row.id)">详情</el-button>
+              <el-button type="text" @click="deleteById(row.id)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  export default {
+    name: 'ApplyList',
+    label: '网格员管理',
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function,
+    },
+    data() {
+      return {
+        searchObj: {
+          name: "",
+          selectionDate: "",
+        },
+        page: {
+          current: 1,
+          size: 10,
+          total: 0,
+        },
+        goAdd: false,
+        tableData: [],
+        fileList: [],
+        ids: [],
+        detail: {},
+      };
+    },
+    created() {
+      this.dict.load("sex", "girdMemberType", "politicsStatus", "education");
+      this.getList();
+    },
+    computed: {
+      colConfigs() {
+        let _ = this;
+        return [
+          {
+            type: "selection",
+          },
+          {
+            prop: "name",
+            label: "网格员姓名",
+          },
+          {
+            prop: "girdName",
+            align: "left",
+            label: "责任网格",
+          },
+          {
+            prop: "phone",
+            align: "center",
+            label: "联系电话",
+          }
+        ];
+      },
+    },
+    methods: {
+      getList() {
+        this.instance
+          .post("/app/appgirdmemberapply/list", null, {
+            params: {
+              ...this.searchObj,
+              ...this.page,
+            },
+          })
+          .then((res) => {
+            if (res.code == 0) {
+              this.tableData = res.data.records;
+              this.page.total = res.data.total;
+            }
+          });
+      },
+      deleteById(ids) {
+        ids &&
+          this.$confirm("是否要删除该网格员？", {
+            type: "error",
+          })
+            .then(() => {
+              this.instance
+                .post("/app/appgirdmemberapply/delete", null, {
+                  params: { ids },
+                })
+                .then((res) => {
+                  if (res?.code == 0) {
+                    this.$message.success("删除成功!");
+                    this.getList();
+                  }
+                });
+            })
+            .catch(() => {});
+      },
+      add (id) {
+        this.$emit('change', {
+          type: 'ApplyAdd',
+          params: {
+            id: id || ''
+          }
+        })
+      },
+
+      toDetail (id) {
+        this.$emit('change', {
+          type: 'ApplyDetail',
+          params: {
+            id
+          }
+        })
+      },
+
+      handleSelectionChange(val) {
+        this.ids = [];
+        val.map((e) => {
+          this.ids.push(e.id);
+        });
+      },
+      resetSearch() {
+        Object.keys(this.searchObj).map((e) => {
+          this.searchObj[e] = "";
+        });
+        this.getList();
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/packages/jianping/AppGridMember/components/Family.vue b/packages/jianping/AppGridMember/components/Family.vue
new file mode 100644
index 00000000..91b33a2f
--- /dev/null
+++ b/packages/jianping/AppGridMember/components/Family.vue
@@ -0,0 +1,499 @@
+<template>
+  <ai-list class="Family">
+    <template slot="title">
+      <ai-title title="责任家庭" isShowBack isShowBottomBorder @onBackClick="onBack"></ai-title>
+    </template>
+    <template slot="content">
+      <ai-search-bar class="search-bar">
+        <template #left>
+          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="isShow = true">添加</el-button>
+          <el-button size="small" :disabled="!ids.length" icon="iconfont iconDelete" @click="removeAll">批量删除</el-button>
+          <el-select size="small" style="width: 200px;" v-model="search.girdId" placeholder="所属网格" clearable @change="getListInit()">
+            <el-option
+              v-for="(item,i) in girdList"
+              :key="i"
+              :label="item.girdName"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </template>
+        <template #right>
+          <el-input
+            v-model="search.name"
+            class="search-input"
+            size="small"
+            v-throttle="() => {search.current = 1, getList()}"
+            placeholder="姓名/身份证/联系方式"
+            clearable
+            @clear="search.current = 1, search.name = '', getList()"
+            suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        style="margin-top: 6px;"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        @handleSelectionChange="handleSelectionChange"
+        @getList="getList">
+        <el-table-column slot="options" width="100px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="remove(row.gmrId)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+      <ai-dialog
+        :visible.sync="isShow"
+        width="890px"
+        @close="closeDialog"
+        title="添加户主"
+        @onConfirm="onConfirm">
+        <ai-area-select clearable always-show :instance="instance"  v-model="areaId" :disabled-level="disabledLevel" @change="search.current = 1, getUserList()"></ai-area-select>
+        <span style="margin-top:16px;"><span style="color:#f46;margin-right:4px;">*</span>网格：</span>
+        <el-select size="small" style="width: 280px;margin-top:16px;" v-model="girdId" placeholder="请选择网格" clearable>
+          <el-option
+            v-for="(item,i) in girdList"
+            :key="i"
+            :label="item.girdName"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+        <div class="AiWechatSelecter-container">
+          <div class="AiWechatSelecter-container__left" v-loading="isLoading">
+            <div class="AiWechatSelecter-header">
+              <div class="AiWechatSelecter-header__left">
+                <h2>户主信息列表</h2>
+              </div>
+              <el-input
+                class="search-input"
+                size="mini"
+                placeholder="请输入姓名/身份证号"
+                v-model="name"
+                clearable
+                @keyup.enter.native="getUserList()"
+                @clear="name = '', getUserList()"
+                suffix-icon="iconfont iconSearch">
+              </el-input>
+            </div>
+            <el-scrollbar class="AiWechatSelecter-list">
+              <el-checkbox-group v-model="chooseUser">
+                <el-checkbox
+                  :label="`${item.name}~${item.id}`"
+                  v-for="(item, index) in userList"
+                  :key="index">
+                  {{ item.name }}-{{ item.idNumber }}
+                </el-checkbox>
+              </el-checkbox-group>
+              <AiEmpty v-if="!this.userList.length"></AiEmpty>
+            </el-scrollbar>
+          </div>
+          <div class="AiWechatSelecter-container__right">
+            <div class="AiWechatSelecter-header AiWechatSelecter-header__right">
+              <h2>已选择</h2>
+              <el-button size="mini" icon="el-icon-delete" @click="clearAll">清空</el-button>
+            </div>
+            <el-scrollbar class="AiWechatSelecter-list">
+              <div class="tags-wrapper">
+                <el-tag
+                  v-for="(item, index) in chooseUser"
+                  :key="index"
+                  closable
+                  @close="del(item)"
+                  size="small"
+                  type="info">
+                  {{ item.split('~')[0] }}
+                </el-tag>
+              </div>
+            </el-scrollbar>
+          </div>
+        </div>
+      </ai-dialog>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  export default {
+    name: 'Family',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object
+    },
+
+    data() {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          name: '',
+          girdId: ''
+        },
+        isLoading: false,
+        form: {
+
+        },
+        userList: [],
+        name: '',
+        chooseUser: [],
+        isShow: false,
+        total: 10,
+        colConfigs: [
+          { type: 'selection', label: '' },
+          { prop: 'name',  label: '户主姓名', align: 'left', width: '200px' },
+          { prop: 'idNumber', label: '身份证号', align: 'center' },
+          { prop: 'phone', label: '联系方式', align: 'center' },
+          { prop: 'girdName', label: '所属网格', align: 'center' },
+          { prop: 'createTime', label: '添加时间', align: 'center' },
+          { slot: 'options', label: '操作', align: 'center' }
+        ],
+        tableData: [],
+        areaId: '',
+        ids: [],
+        disabledLevel: 0,
+        girdList: [],
+        girdId: '',
+      }
+    },
+
+    computed: {
+      ...mapState(['user'])
+    },
+
+    created() {
+      this.areaId = this.user.info.areaId
+      this.disabledLevel = this.user.info.areaList.length
+      this.dict.load('epidemicDangerousAreaLevel').then(() => {
+        this.getGirdList()
+        this.getList()
+        this.getUserList()
+      })
+    },
+
+    methods: {
+      getGirdList() {
+        this.instance.post(`/app/appgirdmemberinfo/queryMyGirdListByLevel2?girdMemberId=${this.params.id}`).then(res => {
+          if (res.code == 0) {
+            this.girdList = res.data
+          }
+        })
+      },
+      getListInit() {
+        this.search.current = 1
+        this.getList()
+      },
+      getList () {
+        this.instance.post(`/app/appgirdmemberresident/listByGirdMember`, null, {
+          params: {
+            ...this.search,
+            girdMemberId: this.params.id,
+            areaId: this.areaId
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      },
+
+    removeAll() {
+        if (!this.ids) {
+          return this.$message.error('请选择户主')
+        }
+        this.remove(this.ids.join(','))
+      },
+      handleSelectionChange(e) {
+        this.ids = e.map(v => v.gmrId)
+      },
+
+      clearAll () {
+        this.chooseUser = []
+      },
+
+      onConfirm () {
+        if(!this.girdId) {
+          return this.$message.error('请选择网格')
+        }
+
+        if (!this.chooseUser.length) {
+          return this.$message.error('请选择户主')
+        }
+
+        const residentList = this.chooseUser.map(v => {
+          return {
+            girdMemberId: this.params.id,
+            name: v.split('~')[0],
+            residentId: v.split('~')[1],
+            girdId: this.girdId
+          }
+        })
+        this.instance.post(`/app/appgirdmemberresident/add`, {
+          residentList
+        }).then(res => {
+          if (res.code == 0) {
+            this.current = 1
+            this.getList()
+            this.$message.success('添加成功')
+            this.closeDialog()
+          }
+        })
+      },
+      closeDialog() {
+        this.isShow = false
+        this.chooseUser = []
+        this.girdId = ''
+        this.name = ''
+        this.areaId = this.user.info.areaId
+        this.getUserList()
+      },
+
+      del (e) {
+        this.chooseUser.splice(this.chooseUser.indexOf(e), 1)
+      },
+
+      getUserList () {
+        this.isLoading = true
+        this.instance.post(`/app/appresident/list`, null, {
+          params: {
+            current: 1,
+            size: 200,
+            con: this.name,
+            householdName: 1,
+            areaId: this.areaId,
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.userList = res.data.records
+          }
+
+          this.isLoading = false
+        })
+      },
+
+      onBack () {
+        this.$emit('change', {
+          type: 'list'
+        })
+      },
+
+      remove(id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appgirdmemberresident/delete?ids=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .Family {
+    .AiWechatSelecter-container {
+      display: flex;
+      height: 380px;
+      margin-top: 20px;
+
+      ::v-deep {
+        .el-icon-circle-close {
+          display: inline-block!important;
+        }
+      }
+
+      .tree-container {
+        & > span {
+          display: block;
+          margin-bottom: 4px;
+        }
+
+        .tree-user__item {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+        img {
+          width: 27px;
+          height: 27px;
+          margin-right: 10px;
+        }
+      }
+
+      ::v-deep .el-tree {
+        background: transparent;
+
+        .el-tree-node {
+          margin-bottom: 8px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+
+        .el-tree-node__content {
+          height: auto;
+          margin-top: 2px;
+          // align-items: inherit;
+        }
+        
+        .el-tree-node__expand-icon {
+          height: 24px;
+        }
+      }
+
+      .mask-btn__wrapper {
+        position: relative;
+      }
+
+      .mask-btn {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+      }
+
+      .userlist-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 8px;
+        padding: 0 17px;
+        cursor: pointer;
+        user-select: none;
+
+        ::v-deep .el-checkbox__label {
+          display: none;
+        }
+
+        .userlist-item__left {
+          display: flex;
+          align-items: center;
+
+          span {
+            color: #222222;
+            font-size: 14px;
+          }
+
+          img {
+            width: 40px;
+            height: 40px;
+            margin-right: 8px;
+          }
+        }
+      }
+
+      & > div {
+        width: 280px;
+        background: #FCFCFC;
+        border: 1px solid #D0D4DC;
+      }
+
+      .AiWechatSelecter-list {
+        height: calc(100% - 40px);
+        padding: 8px 0;
+
+        ::v-deep .el-scrollbar__wrap {
+          margin-bottom: 0!important;
+          overflow-x: hidden;
+        }
+
+        ::v-deep .el-checkbox-group {
+          padding: 0 8px;
+
+          .el-checkbox {
+            display: block;
+            margin-right: 0;
+          }
+        }
+      }
+
+      .AiWechatSelecter-container__left {
+        flex: 1;
+      }
+
+      .AiWechatSelecter-container__right {
+        flex: 1;
+        margin-left: 20px;
+
+        .AiWechatSelecter-list {
+          .tags-wrapper {
+            padding: 0 8px;
+          }
+          .el-tag {
+            margin: 0 8px 8px 0px;
+            color: #222222;
+            font-size: 14px;
+          }
+        }
+      }
+
+      .AiWechatSelecter-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 40px;
+        padding: 0 8px 0 0;
+        border-bottom: 1px solid #D0D4DC;
+        background: #F5F7FA;
+
+        .AiWechatSelecter-header__left {
+          display: flex;
+          align-items: center;
+          padding: 0 8px;
+
+          h2 {
+            height: 100%;
+            line-height: 40px;
+            color: #222222;
+            font-size: 14px;
+            text-align: center;
+            cursor: pointer;
+            border-bottom: 2px solid transparent;
+
+            &.active {
+              color: #2266FF;
+              border-color: #2266FF;
+            }
+          }
+        }
+
+        .el-button {
+          height: 28px;
+          padding: 7px 5px;
+        }
+
+        .el-input {
+          width: 160px;
+        }
+      }
+
+      .AiWechatSelecter-header__right {
+        padding: 0 8px;
+
+        h2 {
+          color: #222222;
+          font-size: 14px;
+          text-align: center;
+        }
+      }
+    }
+  }
+</style>
diff --git a/packages/jianping/AppGridMember/components/MonitorUser.vue b/packages/jianping/AppGridMember/components/MonitorUser.vue
new file mode 100644
index 00000000..3de4fb37
--- /dev/null
+++ b/packages/jianping/AppGridMember/components/MonitorUser.vue
@@ -0,0 +1,498 @@
+<template>
+  <ai-list class="Family">
+    <template slot="title">
+      <ai-title title="监测对象" isShowBack isShowBottomBorder @onBackClick="onBack"></ai-title>
+    </template>
+    <template slot="content">
+      <ai-search-bar class="search-bar">
+        <template #left>
+          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="isShow = true">添加</el-button>
+          <el-button size="small" :disabled="!ids.length" icon="iconfont iconDelete" @click="removeAll">批量删除</el-button>
+          <el-select size="small" style="width: 200px;" v-model="search.girdId" placeholder="所属网格" clearable @change="getListInit()">
+            <el-option
+              v-for="(item,i) in girdList"
+              :key="i"
+              :label="item.girdName"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </template>
+        <template #right>
+          <el-input
+            v-model="search.name"
+            class="search-input"
+            size="small"
+            v-throttle="() => {search.current = 1, getList()}"
+            placeholder="姓名/身份证/联系方式"
+            clearable
+            @clear="search.current = 1, search.name = '', getList()"
+            suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        style="margin-top: 6px;"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        @handleSelectionChange="handleSelectionChange"
+        @getList="getList">
+        <el-table-column slot="options" width="100px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="remove(row.gmrId)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+      <ai-dialog
+        :visible.sync="isShow"
+        width="890px"
+        @close="closeDialog"
+        title="添加户主"
+        @onConfirm="onConfirm">
+        <ai-area-select clearable always-show :instance="instance"  v-model="areaId" :disabled-level="disabledLevel" @change="search.current = 1, getUserList()"></ai-area-select>
+        <span style="margin-top:16px;"><span style="color:#f46;margin-right:4px;">*</span>网格：</span>
+        <el-select size="small" style="width: 280px;margin-top:16px;" v-model="girdId" placeholder="请选择网格" clearable>
+          <el-option
+            v-for="(item,i) in girdList"
+            :key="i"
+            :label="item.girdName"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+        <div class="AiWechatSelecter-container">
+          <div class="AiWechatSelecter-container__left" v-loading="isLoading">
+            <div class="AiWechatSelecter-header">
+              <div class="AiWechatSelecter-header__left">
+                <h2>户主信息列表</h2>
+              </div>
+              <el-input
+                class="search-input"
+                size="mini"
+                placeholder="请输入姓名/身份证号"
+                v-model="name"
+                clearable
+                v-throttle="getUserList"
+                @clear="name = '', getUserList()"
+                suffix-icon="iconfont iconSearch">
+              </el-input>
+            </div>
+            <el-scrollbar class="AiWechatSelecter-list">
+              <el-checkbox-group v-model="chooseUser">
+                <el-checkbox
+                  :label="`${item.name}~${item.id}`"
+                  v-for="(item, index) in userList"
+                  :key="index">
+                  {{ item.name }}-{{ item.idNumber }}
+                </el-checkbox>
+              </el-checkbox-group>
+              <AiEmpty v-if="!this.userList.length"></AiEmpty>
+            </el-scrollbar>
+          </div>
+          <div class="AiWechatSelecter-container__right">
+            <div class="AiWechatSelecter-header AiWechatSelecter-header__right">
+              <h2>已选择</h2>
+              <el-button size="mini" icon="el-icon-delete" @click="clearAll">清空</el-button>
+            </div>
+            <el-scrollbar class="AiWechatSelecter-list">
+              <div class="tags-wrapper">
+                <el-tag
+                  v-for="(item, index) in chooseUser"
+                  :key="index"
+                  closable
+                  @close="del(item)"
+                  size="small"
+                  type="info">
+                  {{ item.split('~')[0] }}
+                </el-tag>
+              </div>
+            </el-scrollbar>
+          </div>
+        </div>
+      </ai-dialog>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  export default {
+    name: 'Family',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object
+    },
+
+    data() {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          name: '',
+          girdId: ''
+        },
+        isLoading: false,
+        form: {
+
+        },
+        userList: [],
+        name: '',
+        chooseUser: [],
+        isShow: false,
+        total: 10,
+        colConfigs: [
+          { type: 'selection', label: '' },
+          { prop: 'name',  label: '户主姓名', align: 'left', width: '200px' },
+          { prop: 'idNumber', label: '身份证号', align: 'center' },
+          { prop: 'phone', label: '联系方式', align: 'center' },
+          { prop: 'girdName', label: '所属网格', align: 'center' },
+          { prop: 'createTime', label: '添加时间', align: 'center' },
+          { slot: 'options', label: '操作', align: 'center' }
+        ],
+        tableData: [],
+        areaId: '',
+        ids: [],
+        disabledLevel: 0,
+        girdList: [],
+        girdId: '',
+      }
+    },
+
+    computed: {
+      ...mapState(['user'])
+    },
+
+    created() {
+      this.areaId = this.user.info.areaId
+      this.disabledLevel = this.user.info.areaList.length
+      this.dict.load('epidemicDangerousAreaLevel').then(() => {
+        this.getGirdList()
+        this.getList()
+        this.getUserList()
+      })
+    },
+
+    methods: {
+      getGirdList() {
+        this.instance.post(`/app/appgirdmemberinfo/queryMyGirdListByLevel2?girdMemberId=${this.params.id}`).then(res => {
+          if (res.code == 0) {
+            this.girdList = res.data
+          }
+        })
+      },
+      getListInit() {
+        this.search.current = 1
+        this.getList()
+      },
+      getList () {
+        this.instance.post(`/app/appgirdmemberpoverty/listByGirdMember`, null, {
+          params: {
+            ...this.search,
+            girdMemberId: this.params.id,
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      },
+
+    removeAll() {
+        if (!this.ids) {
+          return this.$message.error('请选择户主')
+        }
+        this.remove(this.ids.join(','))
+      },
+      handleSelectionChange(e) {
+        this.ids = e.map(v => v.gmrId)
+      },
+
+      clearAll () {
+        this.chooseUser = []
+      },
+
+      onConfirm () {
+        if(!this.girdId) {
+          return this.$message.error('请选择网格')
+        }
+
+        if (!this.chooseUser.length) {
+          return this.$message.error('请选择户主')
+        }
+
+        const povertyList = this.chooseUser.map(v => {
+          return {
+            girdMemberId: this.params.id,
+            name: v.split('~')[0],
+            girdId: this.girdId,
+            povertyId: v.split('~')[1]
+          }
+        })
+        this.instance.post(`/app/appgirdmemberpoverty/add`, {
+          povertyList
+        }).then(res => {
+          if (res.code == 0) {
+            this.current = 1
+            this.getList()
+            this.$message.success('添加成功')
+            this.closeDialog()
+          }
+        })
+      },
+      closeDialog() {
+        this.isShow = false
+        this.chooseUser = []
+        this.girdId = ''
+        this.name = ''
+        this.areaId = this.user.info.areaId
+        this.getUserList()
+      },
+
+      del (e) {
+        this.chooseUser.splice(this.chooseUser.indexOf(e), 1)
+      },
+
+      getUserList () {
+        this.isLoading = true
+        this.instance.post(`/app/apppreventionreturntopoverty/list`, null, {
+          params: {
+            current: 1,
+            size: 200,
+            con: this.name,
+            isHousehold: 1,
+            areaId: this.areaId
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.userList = res.data.records
+          }
+
+          this.isLoading = false
+        })
+      },
+
+      onBack () {
+        this.$emit('change', {
+          type: 'list'
+        })
+      },
+
+      remove(id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appgirdmemberresident/delete?ids=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .Family {
+    .AiWechatSelecter-container {
+      display: flex;
+      height: 380px;
+      margin-top: 20px;
+
+      ::v-deep {
+        .el-icon-circle-close {
+          display: inline-block!important;
+        }
+      }
+
+      .tree-container {
+        & > span {
+          display: block;
+          margin-bottom: 4px;
+        }
+
+        .tree-user__item {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+        img {
+          width: 27px;
+          height: 27px;
+          margin-right: 10px;
+        }
+      }
+
+      ::v-deep .el-tree {
+        background: transparent;
+
+        .el-tree-node {
+          margin-bottom: 8px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+
+        .el-tree-node__content {
+          height: auto;
+          margin-top: 2px;
+          // align-items: inherit;
+        }
+        
+        .el-tree-node__expand-icon {
+          height: 24px;
+        }
+      }
+
+      .mask-btn__wrapper {
+        position: relative;
+      }
+
+      .mask-btn {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+      }
+
+      .userlist-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 8px;
+        padding: 0 17px;
+        cursor: pointer;
+        user-select: none;
+
+        ::v-deep .el-checkbox__label {
+          display: none;
+        }
+
+        .userlist-item__left {
+          display: flex;
+          align-items: center;
+
+          span {
+            color: #222222;
+            font-size: 14px;
+          }
+
+          img {
+            width: 40px;
+            height: 40px;
+            margin-right: 8px;
+          }
+        }
+      }
+
+      & > div {
+        width: 280px;
+        background: #FCFCFC;
+        border: 1px solid #D0D4DC;
+      }
+
+      .AiWechatSelecter-list {
+        height: calc(100% - 40px);
+        padding: 8px 0;
+
+        ::v-deep .el-scrollbar__wrap {
+          margin-bottom: 0!important;
+          overflow-x: hidden;
+        }
+
+        ::v-deep .el-checkbox-group {
+          padding: 0 8px;
+
+          .el-checkbox {
+            display: block;
+            margin-right: 0;
+          }
+        }
+      }
+
+      .AiWechatSelecter-container__left {
+        flex: 1;
+      }
+
+      .AiWechatSelecter-container__right {
+        flex: 1;
+        margin-left: 20px;
+
+        .AiWechatSelecter-list {
+          .tags-wrapper {
+            padding: 0 8px;
+          }
+          .el-tag {
+            margin: 0 8px 8px 0px;
+            color: #222222;
+            font-size: 14px;
+          }
+        }
+      }
+
+      .AiWechatSelecter-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 40px;
+        padding: 0 8px 0 0;
+        border-bottom: 1px solid #D0D4DC;
+        background: #F5F7FA;
+
+        .AiWechatSelecter-header__left {
+          display: flex;
+          align-items: center;
+          padding: 0 8px;
+
+          h2 {
+            height: 100%;
+            line-height: 40px;
+            color: #222222;
+            font-size: 14px;
+            text-align: center;
+            cursor: pointer;
+            border-bottom: 2px solid transparent;
+
+            &.active {
+              color: #2266FF;
+              border-color: #2266FF;
+            }
+          }
+        }
+
+        .el-button {
+          height: 28px;
+          padding: 7px 5px;
+        }
+
+        .el-input {
+          width: 160px;
+        }
+      }
+
+      .AiWechatSelecter-header__right {
+        padding: 0 8px;
+
+        h2 {
+          color: #222222;
+          font-size: 14px;
+          text-align: center;
+        }
+      }
+    }
+  }
+</style>
diff --git a/packages/jianping/AppGridMember/components/add.vue b/packages/jianping/AppGridMember/components/add.vue
new file mode 100644
index 00000000..d3d6fd90
--- /dev/null
+++ b/packages/jianping/AppGridMember/components/add.vue
@@ -0,0 +1,543 @@
+<template>
+  <section style="height: 100%">
+    <ai-detail class="add">
+      <template #title>
+        <ai-title :title="title" :isShowBack="true" :isShowBottomBorder="true" @onBackClick="cancel(false)"></ai-title>
+      </template>
+      <template #content>
+        <el-form
+          ref="rules"
+          :model="forms"
+          :rules="formRules"
+          size="small"
+          label-suffix="："
+          label-width="136px">
+          <ai-card title="基础信息" >
+            <template #right  v-if="title=='网格员详情'">
+              <span style="color:#2266FF;cursor: pointer;font-size: 12px;" class="iconfont iconEdit" v-if="editOne==false" @click="editOne=true">修改</span>
+              <span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editOne==true" @click="searchDetail(),editOne=false">取消</span>
+              <span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editOne==true" @click="save()">保存</span>
+            </template>
+            <template slot="content">
+              <div class="above" v-if="editOne==true">
+                <div class="left">
+                  <el-form-item label="网格员姓名" prop="name" >
+                    <el-input v-model="forms.name" placeholder="请选择网格员" disabled>
+                      <template #append>
+                        <ai-wechat-selecter :isMultiple="false" refs="addTags" :instance="instance" v-model="users" @change="getSelectPerson">
+                          <el-button size="small" type="primary"><span style="color: #fff">选择成员</span></el-button>
+                        </ai-wechat-selecter>
+                      </template>
+                    </el-input>
+                  </el-form-item>
+                  <el-form-item label="选用日期" prop="selectionDate" >
+                    <el-date-picker
+                      v-model="forms.selectionDate"
+                      type="date"
+                      style="width: 100%"
+                      value-format="yyyy-MM-dd"
+                      size="medium"
+                      placeholder="选择日期">
+                    </el-date-picker>
+                  </el-form-item>
+                  <el-form-item label="身份证号" prop="idNumber" >
+                      <el-input v-model="forms.idNumber" placeholder="请输入…" maxlength="18" show-word-limit></el-input>
+                  </el-form-item>
+                </div>
+                <div class="right">
+                  <el-form-item label="照片" prop="photo">
+                    <!-- <ai-uploader :instance="instance" v-model="photoList" :limit="1" @change="photoChange"></ai-uploader> -->
+                    <ai-avatar :instance="instance"  v-model="forms.photo"/>
+                  </el-form-item>
+                </div>
+              </div>
+              <div class="above" v-if="editOne==true">
+                <div class="left">
+                  <el-form-item label="出生日期" prop="birthday" >
+                    <el-date-picker
+                        v-model="forms.birthday"
+                        type="date"
+                        style="width: 100%"
+                        value-format="yyyy-MM-dd"
+                        size="medium"
+                        placeholder="选择日期">
+                    </el-date-picker>
+                  </el-form-item>
+                  <el-form-item label="联系电话" prop="phone" >
+                    <el-input v-model.number="forms.phone" placeholder="请输入…" maxlength="11" show-word-limit></el-input>
+                  </el-form-item>
+                </div>
+                <div class="right">
+                  <el-form-item label="性别" prop="sex" >
+                    <el-select size="medium" style="width: 100%" v-model="forms.sex" placeholder="请选择..." clearable>
+                      <el-option
+                        v-for="(item,i) in dict.getDict('sex')"
+                        :key="i"
+                        :label="item.dictName"
+                        :value="item.dictValue"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="电子邮箱" prop="mail" >
+                      <el-input v-model="forms.mail" placeholder="请输入…"></el-input>
+                  </el-form-item>
+                </div>
+              </div>
+              <template  v-if="editOne==false">
+                <div class="above">
+                  <div class="left">
+                    <ai-wrapper label-width="120px"  :columnsNumber="1"  style="margin-top: 16px;">
+                      <ai-info-item label="网格员姓名："><span >{{forms.name}}</span></ai-info-item>
+                      <ai-info-item label="选用日期："><span >{{forms.selectionDate}}</span></ai-info-item>
+                      <ai-info-item label="身份证号："><span >{{forms.idNumber}}</span></ai-info-item>
+                      <ai-info-item label="性别："><span >{{dict.getLabel('sex', forms.sex)}}</span></ai-info-item>
+                      <ai-info-item label="出生日期："><span >{{forms.birthday}}</span></ai-info-item>
+                      <ai-info-item label="电子邮箱："><span >{{forms.mail}}</span></ai-info-item>
+                    </ai-wrapper>
+                  </div>
+                  <div class="right">
+                    <ai-wrapper label-width="120px"  :columnsNumber="1"  style="margin-top: 16px;">
+                      <ai-info-item label="照片：" v-if="forms.photo">
+                        <span >
+                          <ai-uploader :instance="instance" v-model="photoList" disabled :limit="1" @change="photoChange"></ai-uploader>
+                        </span>
+                      </ai-info-item>
+                      <ai-info-item label="联系电话："><span >{{forms.phone}}</span></ai-info-item>
+                    </ai-wrapper>
+                  </div>
+                </div>
+              </template>
+            </template>
+          </ai-card>
+          <ai-card title="关联信息" >
+            <template #right  v-if="title=='网格员详情'">
+              <span style="color:#2266FF;cursor: pointer;font-size: 12px;" class="iconfont iconEdit" v-if="editTwo==false" @click="editTwo=true">修改</span>
+              <span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editTwo==true" @click="searchDetail(),editTwo=false">取消</span>
+              <span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editTwo==true" @click="save()">保存</span>
+            </template>
+            <template slot="content">
+              <template v-if="editTwo==true">
+                <el-form-item label="责任网格" prop="girdInfoList" style="margin-top: 8px;">
+                  <el-form-item style="width: 100%" label-width="80px" :label="'网格' + (index + 1)" v-for="(item, index) in forms.girdInfoList" :key="'选项' + (index + 1)">
+                    <div class="form-flex">
+                      <el-select v-model="item.checkType" placeholder="请选择网格角色">
+                        <el-option
+                          v-for="item in options"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value">
+                        </el-option>
+                      </el-select>
+                      <el-input disabled v-model="item.girdName" :maxlength="200" size="small" placeholder="请选择责任网格">
+                        <template slot="append">
+                          <el-button size="small" @click="currIndex = index, showGrid = true">选择网格</el-button>
+                        </template>
+                      </el-input>
+                      <el-button type="danger" size="small" @click="removeGrid(index)">删除</el-button>
+                    </div>
+                  </el-form-item>
+                  <el-button type="primary" size="small" @click="addGrid">添加选项</el-button>
+                  <!-- <el-button size="small" @click="showGrid=true">选择网格</el-button> -->
+                </el-form-item>
+                <div class="above">
+                  <div class="left">
+                    <el-form-item label="是否特殊网格员" prop="isGirdMember" >
+                      <el-radio-group v-model="forms.isGirdMember">
+                        <el-radio label="0">否</el-radio>
+                        <el-radio label="1">是</el-radio>
+                      </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label="政治面貌" prop="politicsStatus" >
+                      <el-select v-model="forms.politicsStatus" size="small" style="width: 100%" placeholder="请选择..." clearable>
+                        <el-option v-for="(item,i) in dict.getDict('politicsStatus')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
+                      </el-select>
+                    </el-form-item>
+                  </div>
+                  <div class="right">
+                    <el-form-item label="特殊网格员" prop="girdMemberType" v-if="forms.isGirdMember==1">
+                      <el-select v-model="forms.girdMemberType" size="small" placeholder="请选择..." clearable>
+                        <el-option v-for="(item,i) in dict.getDict('girdMemberType')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="学历" prop="education" >
+                      <el-select v-model="forms.education" style="width: 100%" size="small" placeholder="请选择..." clearable>
+                        <el-option v-for="(item,i) in dict.getDict('education')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
+                      </el-select>
+                    </el-form-item>
+                  </div>
+                </div>
+                <el-form-item label="个人简介" prop="introduction" >
+                  <el-input
+                    type="textarea"
+                    maxlength="200"
+                    show-word-limit
+                    :rows="4"
+                    placeholder="请输入内容"
+                    v-model="forms.introduction">
+                  </el-input>
+                </el-form-item>
+                <el-form-item label="人生格言" prop="motto" >
+                  <el-input
+                    type="textarea"
+                    maxlength="200"
+                    show-word-limit
+                    :rows="4"
+                    placeholder="请输入内容"
+                    v-model="forms.motto">
+                  </el-input>
+                </el-form-item>
+              </template>
+              <template v-if="editTwo==false">
+                <ai-wrapper label-width="120px" :columnsNumber="2" style="margin-top: 16px;">
+                  <ai-info-item label="责任网格：" style="width: 100%;"><span v-html="girdInfoStr || '-'"></span></ai-info-item>
+                  <ai-info-item label="是否特殊网格员：">
+                    <span>{{ !forms.isGirdMember ? '-' : forms.isGirdMember === '0' ? '否' : '是' }}</span>
+                  </ai-info-item>
+                  <ai-info-item label="特殊网格员：" v-if="forms.isGirdMember==1"><span >{{dict.getLabel('girdMemberType', forms.girdMemberType)}}</span></ai-info-item>
+                  <ai-info-item label="政治面貌："><span >{{dict.getLabel('politicsStatus', forms.politicsStatus)}}</span></ai-info-item>
+                  <ai-info-item label="学历："><span >{{dict.getLabel('education', forms.education)}}</span></ai-info-item>
+                  <ai-info-item label="人生格言：" style="width: 100%;"><span >{{forms.motto}}</span></ai-info-item>
+                  <ai-info-item label="个人简介：" style="width: 100%;"><span >{{forms.introduction}}</span></ai-info-item>
+                </ai-wrapper>
+              </template>
+            </template>
+          </ai-card>
+        </el-form>
+        <ai-dialog title="选择网格" :visible.sync="showGrid" :customFooter="true"  :destroyOnClose="true" border  width="720px">
+          <div class="grid">
+            <el-tree
+              :data="treeObj.treeList"
+              :props="treeObj.defaultProps"
+              node-key="id"
+              ref="tree"
+              :check-strictly="true"
+              show-checkbox
+              :default-checked-keys="currCheckedKeys"
+              default-expand-all
+              @check="onCheckChange">
+            </el-tree>
+          </div>
+          <div class="dialog-footer" slot="footer" >
+            <el-button  size="medium" @click="showGrid=false">取消</el-button>
+            <el-button  type="primary" size="medium" @click="getCheckedTree()">确认</el-button>
+          </div>
+        </ai-dialog>
+      </template>
+      <template #footer v-if="title=='添加网格员'">
+        <el-button @click="cancel(false)" class="delete-btn footer-btn" >取 消</el-button>
+        <el-button type="primary" @click="save()"  class="footer-btn">提 交</el-button>
+      </template>
+    </ai-detail>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "add",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    params: Object,
+  },
+  data() {
+    return {
+      users: [],
+      currIndex: 0,
+      forms: {
+        birthday: "",
+        education: "",
+        girdId: "",
+        girdInfoList: [],
+        girdMemberType: "",
+        id: "",
+        wxUserId: '',
+        introduction: "",
+        isGirdMember: "",
+        mail: "",
+        motto: "",
+        name: "",
+        phone: "",
+        photo: "",
+        politicsStatus: "",
+        selectionDate: "",
+        sex: "",
+        userId: "",
+      },
+      options: [{
+        value: '2',
+        label: '网格长'
+      }, {
+        value: '1',
+        label: '网格员'
+      }],
+      showGrid: false,
+      treeObj: {
+        treeList: [],
+        defaultProps: {
+          children: "girdList",
+          label: "girdName",
+        },
+        checkedKeys: [],
+      },
+      girdInfoStr: '',
+      photoList: [],
+      title: "添加网格员",
+      editOne: false,
+      editTwo: false,
+    };
+  },
+  created() {
+    this.beforeSelectTree()
+    if (this.params.id) {
+      this.searchDetail();
+      this.title = "网格员详情";
+      this.editOne = false;
+      this.editTwo = false;
+    } else {
+      this.title = "添加网格员";
+      this.editOne = true;
+      this.editTwo = true;
+    }
+  },
+  computed: {
+    currCheckedKeys () {
+      if (this.forms && this.forms.girdInfoList && this.forms.girdInfoList[this.currIndex] && this.forms.girdInfoList[this.currIndex].id) {
+        return [this.forms.girdInfoList[this.currIndex].id]
+      }
+
+      return []
+    },
+    formRules() {
+      let phonePass = (rule, value, callback) => {
+        let reg = /^(?:(?:\+|00)86)?1\d{10}$/;
+        if (value) {
+          if (reg.test(value)) {
+            callback();
+          } else {
+            callback(new Error("联系电话格式错误"));
+          }
+        } else {
+          callback(new Error("请输入联系电话"));
+        }
+      };
+      return {
+        name: [
+          { required: true, message: "请输入网格员姓名", trigger: "change" },
+        ],
+        selectionDate: [
+          { required: true, message: "请选择选用日期", trigger: "change" },
+        ],
+        phone: [{ required: true, validator: phonePass, trigger: "blur" }],
+        girdInfoList: [
+          { required: true, message: "请选择责任网络", trigger: "change" },
+        ],
+        mail: [
+          {
+            type: "email",
+            message: "请输入正确的邮箱地址",
+            trigger: ["blur", "change"],
+          },
+        ]
+      };
+    },
+  },
+  methods: {
+    cancel (isRefresh) {
+      this.$emit('change', {
+        type: 'list',
+        isRefresh: !!isRefresh,
+      })
+    },
+
+    onCheckChange (e) {
+      this.$nextTick(() => {
+        this.$refs.tree.getCheckedKeys().forEach(v => {
+          this.$refs.tree.setChecked(v, false)
+        })
+        this.$refs.tree.setChecked(e.id, true)
+      })
+    },
+
+    removeGrid (index) {
+      this.forms.girdInfoList.splice(index, 1)
+    },
+
+    addGrid () {
+      this.forms.girdInfoList.push({
+        id: '',
+        girdName: '',
+        checkType: ''
+      })
+    },
+    photoChange(val) {
+      this.forms.photo = val[0].url;
+    },
+    getSelectPerson(val) {
+      this.forms.name = val[0].name;
+      this.forms.phone = val[0].phone;
+      this.forms.userId = val[0].sysUserId
+      this.forms.wxUserId = val[0].id
+    },
+    getCheckedTree() {
+      if (!this.$refs.tree.getCheckedNodes().length) {
+        return this.$message.error('请选择网格')
+      }
+
+      if (this.$refs.tree.getCheckedNodes().length > 1) {
+        return this.$message.error('不支持多选')
+      }
+      this.$set(this.forms.girdInfoList, this.currIndex, {
+        ...this.$refs.tree.getCheckedNodes()[0],
+        checkType: this.forms.girdInfoList[this.currIndex].checkType
+      })
+      this.showGrid = false;
+    },
+    handleClose(tag) {
+      this.forms.girdInfoList.splice(this.forms.girdInfoList.indexOf(tag), 1);
+    },
+    beforeSelectTree() {
+      this.treeObj.checkedKeys = [];
+      this.instance.post(`/app/appgirdinfo/listAll`, null, null).then((res) => {
+        if (res.code == 0) {
+          this.treeObj.treeList = res.data;
+          this.forms.girdInfoList.map((e) => {
+            this.treeObj.checkedKeys.push(e.id);
+          });
+        }
+      });
+    },
+    save() {
+      this.$refs["rules"].validate((valid) => {
+        if (valid) {
+          for (let i = 0; i < this.forms.girdInfoList.length; i++) {
+            const currInfo = this.forms.girdInfoList[i]
+            const arr = JSON.parse(JSON.stringify(this.forms.girdInfoList))
+            arr.splice(i, 1)
+            const sameInfo = arr.filter(v => v.id === currInfo.id)
+            if (!currInfo.checkType) {
+              return this.$message.error('请选择网格员类型')
+            }
+
+            if (!currInfo.id) {
+              return this.$message.error('请选择网格')
+            }
+
+            if (currInfo.checkType === '1' && currInfo.girdLevel !== '2') {
+              return this.$message.error(`一级、二级网格不能添加网格员`)
+            }
+
+            if (sameInfo.length) {
+              return this.$message.error('不能选择同一网格重复绑定')
+            }
+          }
+
+          this.instance.post(`/app/appgirdmemberinfo/addOrUpdate`,{
+            ...this.forms,
+            girdInfoListStr: this.forms.girdInfoList.map(v => v.girdName).join(',')
+          }).then((res) => {
+            if (res.code == 0) {
+              if (this.title == "添加网格员") {
+                this.cancel(true)
+              } else {
+                this.editOne = false
+                this.editTwo = false
+                this.searchDetail()
+              }
+            }
+          });
+        } else {
+          return false
+        }
+      });
+    },
+    searchDetail() {
+      this.instance
+        .post(`/app/appgirdmemberinfo/queryDetailById`, null, {
+          params: { id: this.params.id },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.forms = {
+              ...res.data,
+              girdInfoList: res.data.girdInfoList || []
+            };
+            this.users = [{
+              name: res.data.name,
+              phone: res.data.phone,
+              userId: res.data.id,
+              id: res.data.wxUserId
+            }]
+            this.girdInfoStr = ''
+            this.photoList = [{ url: this.forms.photo }];
+            if (res.data.girdInfoList) {
+              res.data.girdInfoList.forEach((e) => {
+                this.girdInfoStr = this.girdInfoStr + `${e.checkType === '1' ? '网格员' : '网格长'}-${e.girdName}&emsp;`
+              })
+            }
+          }
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.add {
+  height: 100%;
+
+    .form-flex {
+      display: flex;
+      align-items: center;
+
+      & > .el-button {
+        margin-left: 20px;
+      }
+
+      .el-input {
+        width: 300px;
+        margin-left: 20px;
+      }
+
+      ::v-deep .el-form-item__content {
+        margin-left: 0!important;
+      }
+    }
+  .ai-detail__title {
+    background-color: #fff;
+  }
+  .ai-detail__content {
+    .ai-detail__content--wrapper {
+      .el-form {
+        // background-color: #fff;
+        // padding: 0 60px;
+        .flex {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          .el-form-item {
+            width: 48%;
+          }
+          .buildingTypes {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+  ::v-deep .el-tag {
+    margin-right: 8px;
+    color: #333333;
+  }
+  .footer-btn {
+    width: 92px;
+  }
+  .above{
+    display: flex;
+    .left, .right{
+      flex: 1;
+    }
+  }
+}
+</style>
diff --git a/packages/jianping/AppGridMember/components/list.vue b/packages/jianping/AppGridMember/components/list.vue
new file mode 100644
index 00000000..57ae3c57
--- /dev/null
+++ b/packages/jianping/AppGridMember/components/list.vue
@@ -0,0 +1,206 @@
+<template>
+  <ai-list class="list" isTabs>
+    <template slot="content">
+      <ai-search-bar bottomBorder>
+        <template slot="left">
+          <el-date-picker
+            v-model="searchObj.selectionDate"
+            type="date"
+            @change="(page.current = 1), getList()"
+            value-format="yyyy-MM-dd"
+            size="small"
+            placeholder="选用时间">
+          </el-date-picker>
+        </template>
+        <template slot="right">
+          <el-input
+            v-model="searchObj.name"
+            size="small"
+            placeholder="网格员/责任网格"
+            v-throttle="() => {page.current = 1, getList()}"
+            clearable
+            @clear="(searchObj.name = '', page.current = 1), getList()"
+            suffix-icon="iconfont iconSearch" />
+        </template>
+      </ai-search-bar>
+      <ai-search-bar style="padding: 16px 0 0">
+        <template slot="left">
+          <el-button
+            icon="iconfont iconAdd"
+            type="primary"
+            size="small"
+            @click="add('')"
+            >添加</el-button
+          >
+          <el-button
+            icon="iconfont iconDelete"
+            @click="deleteById(ids.join(','))"
+            :disabled="!Boolean(ids.length)"
+            >删除</el-button
+          >
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="page.total"
+        ref="aitableex"
+        :current.sync="page.current"
+        :size.sync="page.size"
+        @selection-change="(v) => (ids = v.map((e) => e.id))"
+        @getList="getList()">
+        <el-table-column label="操作" slot="options" align="center" fixed="right" width="220">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="toFamily(row.id)">责任家庭</el-button>
+              <el-button type="text" @click="toMonitorUser(row.id)">监测对象</el-button>
+              <el-button type="text" @click="add(row.id)">详情</el-button>
+              <el-button type="text" @click="deleteById(row.id)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+export default {
+  name: "List",
+  label: "网格员管理",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+  },
+  data() {
+    return {
+      searchObj: {
+        name: "",
+        selectionDate: "",
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0,
+      },
+      goAdd: false,
+      tableData: [],
+      fileList: [],
+      ids: [],
+      detail: {},
+    };
+  },
+  created() {
+    this.dict.load("sex", "girdMemberType", "politicsStatus", "education");
+    this.getList();
+  },
+  computed: {
+    colConfigs() {
+      let _ = this;
+      return [
+        {
+          type: "selection",
+        },
+        {
+          prop: "name",
+          label: "网格员姓名",
+        },
+        {
+          prop: "girdInfoListStr",
+          align: "center",
+          label: "责任网格",
+        },
+        {
+          prop: "phone",
+          align: "center",
+          label: "联系电话",
+        },
+        {
+          prop: "selectionDate",
+          align: "center",
+          label: "选用时间",
+        },
+      ];
+    },
+  },
+  methods: {
+    getList() {
+      this.instance
+        .post("/app/appgirdmemberinfo/list", null, {
+          params: {
+            ...this.searchObj,
+            ...this.page,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.tableData = res.data.records;
+            this.page.total = res.data.total;
+          }
+        });
+    },
+    deleteById(ids) {
+      ids &&
+        this.$confirm("是否要删除该网格员？", {
+          type: "error",
+        })
+          .then(() => {
+            this.instance
+              .post("/app/appgirdmemberinfo/delete", null, {
+                params: { ids },
+              })
+              .then((res) => {
+                if (res?.code == 0) {
+                  this.$message.success("删除成功!");
+                  this.getList();
+                }
+              });
+          })
+          .catch(() => {});
+    },
+    add(id) {
+      this.$emit('change', {
+        type: 'Add',
+        params: {
+          id: id || ''
+        }
+      })
+    },
+
+    toMonitorUser (id) {
+      this.$emit('change', {
+        type: 'MonitorUser',
+        params: {
+          id
+        }
+      })
+    },
+
+    toFamily (id) {
+      this.$emit('change', {
+        type: 'Family',
+        params: {
+          id
+        }
+      })
+    },
+
+    handleSelectionChange(val) {
+      this.ids = [];
+      val.map((e) => {
+        this.ids.push(e.id);
+      });
+    },
+    resetSearch() {
+      Object.keys(this.searchObj).map((e) => {
+        this.searchObj[e] = "";
+      });
+      this.getList();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file