网格员-责任家庭

packages/2.0.5/AppGridMember/AppGridMember.vue

@@ -16,6 +16,7 @@
 <script>
 import List from "./components/list";
 import Add from "./components/add";
+import Family from "./components/Family";
 
 export default {
   name: "AppGridMember",
@@ -37,6 +38,7 @@ export default {
   components: {
     Add,
     List,
+    Family
   },
 
   mounted() {},
@@ -48,6 +50,11 @@ export default {
         this.params = data.params;
       }
 
+      if (data.type === "Family") {
+        this.component = "Family"
+        this.params = data.params
+      }
+
       if (data.type === "list") {
         this.component = "List";
         this.params = data.params;

packages/2.0.5/AppGridMember/components/Family.vue

@@ -1,29 +1,425 @@
 <template>
-  <div class="family">
+  <ai-list class="Family">
-
+    <template slot="title">
-  </div>
+      <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>
+        </template>
+        <template #right>
+          <el-input
+            v-model="search.name"
+            class="search-input"
+            size="small"
+            @keyup.enter.native="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"
+        @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="isShow = false"
+        title="添加户主"
+        @onConfirm="onConfirm">
+        <ai-area-select clearable always-show :instance="instance"  v-model="areaId" :disabled-level="disabledLevel"></ai-area-select>
+        <div class="AiWechatSelecter-container">
+          <div class="AiWechatSelecter-container__left">
+            <div class="AiWechatSelecter-header">
+              <div class="AiWechatSelecter-header__left">
+                <h2>户主信息列表</h2>
+              </div>
+              <el-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',
 
-    data () {
+    props: {
-      return {
+      instance: Function,
+      dict: Object,
+      params: Object
+    },
 
+    data() {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          name: ''
+        },
+        form: {
+
+        },
+        userList: [],
+        name: '',
+        chooseUser: [],
+        isShow: false,
+        total: 10,
+        colConfigs: [
+          { prop: 'name',  label: '户主姓名', align: 'left', width: '200px' },
+          { prop: 'idNumber', label: '身份证号', align: 'center' },
+          { prop: 'photo', label: '联系电话', align: 'center' },
+          { prop: 'createTime', label: '添加时间', align: 'center' },
+          { slot: 'options', label: '操作', align: 'center' }
+        ],
+        tableData: [],
+        areaId: '',
+        disabledLevel: 0
       }
     },
 
-    mounted () {
+    computed: {
+      ...mapState(['user'])
+    },
 
+    created() {
+      this.areaId = this.user.info.areaId
+      this.disabledLevel = this.user.info.areaList.length
+      this.dict.load('epidemicDangerousAreaLevel').then(() => {
+        this.getList()
+        this.getUserList()
+      })
     },
 
     methods: {
+      getList () {
+        this.instance.post(`/app/appgirdmemberresident/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
+          }
+        })
+      },
 
+      clearAll () {
+        this.chooseUser = []
+      },
+
+      onConfirm () {
+        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]
+          }
+        })
+        this.instance.post(`/app/appgirdmemberresident/add`, {
+          residentList
+        }).then(res => {
+          if (res.code == 0) {
+            this.current = 1
+            this.getList()
+            this.$message.success('添加成功')
+            this.isShow = false
+          }
+        })
+      },
+
+      del (e) {
+        this.chooseUser.splice(this.chooseUser.indexOf(e), 1)
+      },
+
+      getUserList () {
+        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
+          }
+        })
+      },
+
+      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;
 
+      .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>

packages/2.0.5/AppGridMember/components/list.vue

@@ -66,7 +66,7 @@
         <el-table-column label="操作" slot="options" align="center" fixed="right" width="170">
           <template slot-scope="{ row }">
             <div class="table-options">
-              <el-button type="text" @click="add(row.id)">责任家庭</el-button>
+              <el-button type="text" @click="toFamily(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>
@@ -181,6 +181,16 @@ export default {
         }
       })
     },
+
+    toFamily (id) {
+      this.$emit('change', {
+        type: 'Family',
+        params: {
+          id
+        }
+      })
+    },
+
     handleSelectionChange(val) {
       this.ids = [];
       val.map((e) => {