From c17018ae9d26984fec528c8f43a2ef5bec160d9d Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Mon, 30 May 2022 15:07:25 +0800
Subject: [PATCH] BUG 29777

---
 .../grid/AppGridMember/components/Family.vue  | 646 ++++++------------
 1 file changed, 203 insertions(+), 443 deletions(-)

diff --git a/project/sass/apps/grid/AppGridMember/components/Family.vue b/project/sass/apps/grid/AppGridMember/components/Family.vue
index f76dfd5c..e13cd50f 100644
--- a/project/sass/apps/grid/AppGridMember/components/Family.vue
+++ b/project/sass/apps/grid/AppGridMember/components/Family.vue
@@ -10,36 +10,36 @@
           <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"
+                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">
+              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">
+          :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">
@@ -49,449 +49,209 @@
         </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" @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>
+          :visible.sync="isShow"
+          width="1100px"
+          @close="closeDialog"
+          title="添加户主"
+          @onConfirm="onConfirm">
+        <el-form ref="DialogForm" size="small" label-width="0">
+          <el-form-item>
+            <ai-area-select clearable always-show :instance="instance" v-model="areaId" :disabled-level="disabledLevel"/>
+          </el-form-item>
+          <el-form-item label="网格：" required label-width="80px">
+            <el-select size="small" v-model="girdId" placeholder="请选择网格" clearable>
+              <el-option v-for="(item,i) in girdList" :key="i" :label="item.girdName" :value="item.id"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <ai-table-select :instance="instance" :action="`/app/appresident/list?householdName=1&areaId=${areaId}`"
+                             @select="v=>chooseUser=v" multiple/>
+          </el-form-item>
+        </el-form>
       </ai-dialog>
     </template>
   </ai-list>
 </template>
 
 <script>
-  import { mapState } from 'vuex'
-  export default {
-    name: 'Family',
+import {mapState} from 'vuex'
 
-    props: {
-      instance: Function,
-      dict: Object,
-      params: Object
-    },
+export default {
+  name: 'Family',
 
-    data() {
-      return {
-        search: {
-          current: 1,
-          size: 10,
-          name: '',
-          girdId: ''
-        },
-        isLoading: false,
-        form: {
+  props: {
+    instance: Function,
+    dict: Object,
+    params: Object
+  },
 
-        },
-        userList: [],
+  data() {
+    return {
+      search: {
+        current: 1,
+        size: 10,
         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: '',
-      }
-    },
+        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'])
-    },
+  computed: {
+    ...mapState(['user'])
+  },
 
-    created() {
-      this.dict.load('epidemicDangerousAreaLevel').then(() => {
-        this.getGirdList()
-        this.getList()
-        this.getUserList()
+  created() {
+    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,
+          searchAreaId: this.areaId
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+        }
       })
     },
 
-    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,
-            searchAreaId: 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,
-            searchAreaId: 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()
-            }
-          })
-        })
+      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.name,
+          residentId: v.id,
+          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,
+          searchAreaId: 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;
-        }
-      }
-    }
-  }
+.Family {
+}
 </style>