四邻设置开发完成

packages/party/partyMember/AppPartyMember.vue

@@ -9,11 +9,13 @@ import List from './components/List'
 import Add from './components/Add'
 import Detail from './components/Detail'
 import {mapState} from "vuex";
+import NeighbourSetting from "./components/neighbourSetting";
 
 export default {
   name: 'AppPartyMember',
   label: '党员管理',
   components: {
+    NeighbourSetting,
     Add,
     List,
     Detail
@@ -32,6 +34,8 @@ export default {
     component() {
       if (this.$route.hash == "#add") {
         return Add
+      } else if (this.$route.hash == "#ns") {
+        return NeighbourSetting
       } else if (this.$route.query.id) {
         return Detail
       } else return List

packages/party/partyMember/components/List.vue

@@ -114,12 +114,13 @@
           :size.sync="search.size"
           @handleSelectionChange="handleSelectionChange"
           @getList="getList">
-        <el-table-column slot="options" width="160px" fixed="right" label="操作" align="center">
+        <el-table-column slot="options" width="220px" fixed="right" label="操作" align="center">
           <template slot-scope="{ row }">
             <div class="table-options">
               <el-button type="text" @click="toDetail(row.id)">详情</el-button>
               <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
               <el-button type="text" @click="remove(row.id)">删除</el-button>
+              <el-button type="text" @click="showNeighbourSetting(row.id)">四邻设置</el-button>
             </div>
           </template>
         </el-table-column>
@@ -204,6 +205,9 @@ export default {
     this.getList()
   },
   methods: {
+    showNeighbourSetting(id) {
+      this.$router.push({query: {id}, hash: "#ns"})
+    },
     onTreeChange(e) {
       this.$emit("update:selected", e)
       this.getList(e.id)

packages/party/partyMember/components/neighbourSetting.vue

@@ -0,0 +1,219 @@
+<template>
+  <section class="neighbourSetting">
+    <ai-list>
+      <ai-title slot="title" title="四邻设置" isShowBottomBorder isShowBack @onBackClick="back"/>
+      <template #content>
+        <ai-search-bar>
+          <template #left>
+            <el-button type="primary" icon="iconfont iconAdd" @click="dialog=true">添加</el-button>
+            <el-button icon="iconfont iconDelete" :disabled="!search.ids" @click="handleDelete(search.ids)">删除
+            </el-button>
+          </template>
+          <template #right>
+            <el-input size="small" placeholder="搜索党员/四邻信息" v-model="search.name" clearable
+                      @change="page.current=1,getTableData()"/>
+          </template>
+        </ai-search-bar>
+        <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
+                  @getList="getTableData" :col-configs="colConfigs" :dict="dict"
+                  @selection-change="v=>search.ids=v.map(e=>e.pfrId).toString()">
+          <el-table-column slot="options" label="操作" fixed="right" align="center">
+            <template slot-scope="{row}">
+              <el-button type="text" @click="handleDelete(row.pfrId)">删除</el-button>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </template>
+    </ai-list>
+    <ai-dialog title="添加户主" :visible.sync="dialog" @closed="form={},residents=[]" @onConfirm="submit" width="1200px">
+      <ai-area-get v-model="form.areaId" :instance="instance" :root="user.info.areaId" @change="getResident"/>
+      <el-row type="flex" class="mar-t16">
+        <ai-table ref="Residents" :tableData="residents" :total="list.total" :current.sync="list.current"
+                  :size.sync="list.size" class="fill" border height="360px" @getList="getResident"
+                  :col-configs="[{slot: 'resident'}]" layout="slot,->, prev, pager, next, jumper" :pagerCount="5">
+          <el-table-column slot="resident">
+            <template #header>
+              <b v-text="`户主信息列表`"/>
+              <el-input class="fill" v-model="list.con" size="small" placeholder="搜索姓名/身份证号" clearable
+                        @change="list.current=1,getResident()"/>
+            </template>
+            <template slot-scope="{row}">
+              <el-row type="flex" justify="space-between" @click.native="handleSelectResident(row)" class="toggle"
+                      :class="{selected:findResident(row.id)>-1}">
+                <span v-text="row.name"/>
+                <span v-text="idCardNoUtil.hideId(row.idNumber)"/>
+              </el-row>
+            </template>
+          </el-table-column>
+        </ai-table>
+        <ai-table :tableData="form.residentList" :col-configs="[{slot:'resident'}]" :isShowPagination="false" border
+                  height="360px">
+          <el-table-column slot="resident">
+            <template #header>
+              <b v-text="`已选择`"/>
+              <el-button type="text" @click="form.residentList=[]">清空</el-button>
+            </template>
+            <template slot-scope="{row,$index}">
+              <el-row type="flex" align="middle" justify="space-between">
+                <div v-text="[row.residentName, idCardNoUtil.hideId(row.idNumber)].join(' ')"/>
+                <el-button type="text" @click="form.residentList.splice($index,1)">删除</el-button>
+              </el-row>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </el-row>
+    </ai-dialog>
+  </section>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "neighbourSetting",
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+  computed: {
+    ...mapState(['user']),
+    colConfigs() {
+      return [
+        {type: 'selection'},
+        {label: "户主姓名", prop: "name"},
+        {label: "身份证号", prop: "idNumber"},
+        {label: "联系方式", prop: "phone"},
+        {label: "添加时间", prop: "createTime"},
+        {slot: "options"}
+      ]
+    },
+  },
+  data() {
+    return {
+      search: {name: "", ids: ""},
+      page: {current: 1, size: 10, total: 0},
+      tableData: [],
+      dialog: false,
+      form: {areaId: "", residentList: []},
+      residents: [],
+      list: {current: 1, size: 10, total: 0},
+    }
+  },
+  methods: {
+    back() {
+      this.$router.push({})
+    },
+    getTableData() {
+      this.instance.post("/app/apppartyfourresident/listFourResident", null, {
+        params: {...this.page, ...this.search}
+      }).then(res => {
+        if (res?.data) {
+          this.tableData = res.data?.records
+          this.page.total = res.data.total
+        }
+      })
+    },
+    handleDelete(ids) {
+      this.$confirm("是否要删除户主?").then(() => {
+        this.instance.post("/app/apppartyfourresident/delete", null, {
+          params: {ids}
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$message.success("删除成功!")
+            this.getTableData()
+          }
+        })
+      }).catch(() => 0)
+    },
+    submit() {
+      this.instance.post("/app/apppartyfourresident/add", this.form).then(res => {
+        if (res?.code == 0) {
+          this.$message.success("提交成功!")
+          this.dialog = false
+          this.getTableData()
+        }
+      })
+    },
+    handleSearchArea(v) {
+      this.form.residentList = []
+      this.getResident(v)
+    },
+    getResident() {
+      let {areaId} = this.form
+      this.instance.post("/app/appresident/list", null, {
+        params: {householdName: 1, areaId, ...this.list}
+      }).then(res => {
+        if (res?.data) {
+          // this.residents = res.data.records?.map(e => ({dictValue: e.id, dictName: e.name}))
+          this.residents = res.data.records
+          this.list.total = res.data.total
+        }
+      })
+    },
+    handleSelectResident(row) {
+      let {id: partyId} = this.$route.query
+      let index = this.findResident(row.id)
+      if (index > -1) {
+        this.form.residentList.splice(index, 1)
+      } else {
+        let {id: residentId, name: residentName, idNumber} = row
+        this.form.residentList.push({residentId, residentName, idNumber, partyId})
+      }
+      this.$forceUpdate()
+    },
+    findResident(id) {
+      return this.form.residentList?.findIndex(e => e.residentId == id)
+    }
+  },
+  created() {
+    this.search.partyId = this.$route.query.id
+    this.getTableData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.neighbourSetting {
+  height: 100%;
+
+  .mar-t16 {
+    margin-top: 16px;
+  }
+
+  ::v-deep.ai-dialog__content {
+    .ai-dialog__content--wrapper {
+      padding-right: 0;
+      display: flex;
+      flex-direction: column;
+
+      .el-row {
+        width: 100%;
+
+        .ai-table + .ai-table {
+          margin-left: 16px;
+          width: 400px;
+
+          .ai-table__header > .cell {
+            line-height: 40px;
+          }
+        }
+      }
+
+      .toggle {
+        cursor: pointer;
+
+        &.selected {
+          color: #26f;
+        }
+      }
+
+
+      .ai-table__header > .cell {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+    }
+  }
+}
+</style>