所属小区

2024-09-02 16:32:42 +08:00
parent 2c39458e98
commit 0a5592594b
8 changed files with 3570 additions and 0 deletions
--- a/project/biaopin/AppSeatManagementXbot/components/GroupList.vue
+++ b/project/biaopin/AppSeatManagementXbot/components/GroupList.vue
@@ -0,0 +1,364 @@
+<template>
+  <section class="GroupList">
+    <ai-list>
+      <template slot="title">
+        <ai-title title="群匹配" isShowBottomBorder isShowBack @onBackClick="cancel(false)"></ai-title>
+      </template>
+      <template #content>
+        <ai-search-bar>
+          <template #left>
+            <ai-select v-model="search.matchStatus" :selectList="dict.getDict('xbotGroupMatchStatus')" placeholder="请选择是否匹配" @change="search.current = 1, getTableData()"/>
+            <ai-select v-model="search.status" :selectList="dict.getDict('xbotGroupStatus')" placeholder="请选择群状态" @change="search.current = 1, getTableData()"/>
+            <el-button type="primary" @click="match">自动匹配</el-button>
+          </template>
+          <template #right>
+            <el-input
+              v-model="search.nickname"
+              size="small"
+              placeholder="群名称"
+              clearable
+              v-throttle="() => {search.current = 1, getTableData()}"
+              @clear="search.current = 1, search.nickname = '', getTableData()"
+              suffix-icon="iconfont iconSearch">
+            </el-input>
+          </template>
+        </ai-search-bar>
+        <ai-table :tableData="tableData" :total="total" :current.sync="search.current" :size.sync="search.size"
+                  @getList="getTableData()" :col-configs="colConfigs">
+          <el-table-column slot="avatar" label="群聊头像"  align="left">
+            <template slot-scope="{ row }">
+              <img :src="row.avatar ? row.avatar : 'https://cdn.cunwuyun.cn/dvcp/group-img.png'" alt="" class="group-avatar">
+            </template>
+          </el-table-column>
+          <el-table-column slot="areaName" label="所属地区"  align="center">
+            <template slot-scope="{ row }">
+              <div @click="changeArea(row)" style="cursor: pointer;color:#26f">{{row.areaName || '请选择'}}</div>
+            </template>
+          </el-table-column>
+          <el-table-column slot="villageName" label="所属小区"  align="center">
+            <template slot-scope="{ row }">
+              <div @click="changeVillage(row)" style="cursor: pointer;color:#26f">{{row.villageName || '请选择'}}</div>
+            </template>
+          </el-table-column>
+          <el-table-column slot="option" label="操作"  align="center">
+            <template slot-scope="{ row }">
+              <div class="table-options">
+                <el-button type="text" @click="edit(row)">编辑</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </template>
+    </ai-list>
+    <ai-dialog
+      :visible.sync="dialog"
+      width="800px"
+      @close="dialog=false"
+      title="群关联信息"
+      @onConfirm="onConfirm">
+      <el-form class="ai-form" label-width="120px" :model="editInfo" ref="editInfo">
+        <el-form-item label="群名称" style="width: 100%;">
+          <div>{{editInfo.nickname}}</div>
+        </el-form-item>
+        <el-form-item label="群主ID" style="width: 100%;">
+          <div>{{editInfo.managerWxid}}</div>
+        </el-form-item>
+        <el-form-item label="人员关联" prop="managerTpUserName" style="width: 100%;" :rules="[{ required: true, message: '请选择人员' }]">
+          <!-- <el-input disabled size="small" v-model="editInfo.managerTpUserName" clearable placeholder="请选择人员">
+            <template slot="append">
+              <ai-user-selecter refs="addTags" :isMultiple="false" :instance="instance" v-model="editInfo.user" @change="onChooseUser">
+                <el-button size="small">选择人员</el-button>
+              </ai-user-selecter>
+            </template>
+          </el-input> -->
+          <ai-person-select :instance="instance" :customClicker="true" :chooseUserList="chooseUserList"
+            url="/app/appgirdmemberinfo/list" headerTitle="网格员列表"
+            :isMultiple="false" dialogTitle="选择" @selectPerson="selectPerson" class="aipersonselect">
+            <template name="option" v-slot:option="{ item }">
+              <span class="iconfont iconProlife">{{ item.name }}</span>
+              <ai-id mode="show" :show-eyes="false" :value="item.idNumber"/>
+            </template>
+          </ai-person-select>
+        </el-form-item>
+      </el-form>
+    </ai-dialog>
+    <ai-dialog
+      title="所属地区设置"
+      :visible.sync="showArea"
+      :destroyOnClose="true"
+      width="720px"
+      @onConfirm="areaConfirm"
+      >
+      <el-form class="ai-form" :model="areaInfo" label-width="120px" ref="form">
+        <el-form-item prop="areaId" style="width: 100%;" label="所属地区" :rules="[{required: true, message: '请选择所属地区', trigger: 'blur'}]">
+          <ai-area-get style="width: 400px;" placeholder="所属地区" :instance="instance" v-model="areaInfo.areaId" :name.sync="areaInfo.areaName" />
+        </el-form-item>
+      </el-form>
+    </ai-dialog>
+    <ai-dialog
+      title="所属小区设置"
+      :visible.sync="showVillage"
+      :destroyOnClose="true"
+      width="720px"
+      @onConfirm="villageConfirm"
+      >
+      <el-form class="ai-form" :model="villageInfo" label-width="120px" ref="villageForm">
+        <el-form-item prop="residentialQuarters" style="width: 100%;" label="所属小区" :rules="[{required: true, message: '请选择所属小区', trigger: 'blur'}]">
+          <!-- <ai-area-get style="width: 400px;" placeholder="所属小区" :instance="instance" v-model="villageInfo.villageId" :name.sync="villageInfo.villageName" /> -->
+          <el-select size="small"
+            v-model="villageInfo.residentialQuarters"
+            filterable
+            allow-create
+            default-first-option
+            placeholder="所属小区">
+            <el-option
+              v-for="item in villageOptions"
+              :key="item"
+              :label="item"
+              :value="item">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </ai-dialog>
+  </section>
+
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "GroupList",
+  props: {
+    instance: Function,
+    dict: Object,
+    params: Object
+  },
+  data() {
+    return {
+      search: {
+        current: 1,
+        size: 10,
+        matchStatus: '',
+        status: '',
+        nickname: ''
+      },
+      tableData: [],
+      total: 0,
+      dialog: false,
+      editInfo: {},
+      showArea: false,
+      areaInfo: {},
+      chooseUserList: [],
+      showVillage: false,
+      villageInfo: {residentialQuarters: ''},
+      villageOptions: []
+    }
+  },
+  created() {
+    this.dict.load('xbotGroupMatchStatus', 'xbotGroupStatus').then(() => {
+      this.getTableData()
+    })
+  },
+  computed: {
+    ...mapState(['user']),
+    colConfigs() {
+      return [
+       { slot: "avatar", label: '群聊头像'},
+        { prop: "nickname", label: '群名称', align: 'center'},
+        { prop: "managerNickname", label: '群主昵称', align: 'center'},
+        { prop: "status", label: '群状态', align: 'center', dict: 'xbotGroupStatus'},
+        { prop: "managerTpUserName", label: '关联人员', align: 'center'},
+        { prop: "managerTpUserDeptName", label: '主部门', align: 'center'},
+        { slot: "areaName", label: '所属地区', align: 'center'},
+        { slot: "villageName", label: '所属小区', align: 'center'},
+        { slot: "option"},
+        // { prop: "status", label: '状态'},
+      ]
+    },
+  },
+  methods: {
+    getTableData() {
+      this.instance.post(`/app/xbotCallback/groupMatchList`,null,{
+        params: {
+          ...this.search,
+          managerWxid: this.params.loginUserId
+        }
+      }).then(res => {
+        if(res?.data) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+        }
+      })
+    },
+    showDialog(row) {
+      this.dialog = true
+      this.groupInfo = row
+      this.getTableDataGroup()
+    },
+    getTableDataGroup() {
+      this.instance.post(`/app/xbotCallback/groupList`,null,{
+        params: {
+          // ...this.searchGroup,
+          current: 1,
+          managerWxid: this.groupInfo.loginUserId
+        }
+      }).then(res => {
+        if(res?.data) {
+          this.tableDataGroup = JSON.parse(res.data)
+          this.tableDataGroup.map((item) => {
+            item.num = item.member_list.length
+          })
+          // this.totalGroup = res.data.total
+        }
+      })
+    },
+    cancel(isRefresh) {
+      this.$emit('change', {
+        type: 'List',
+        isRefresh: !!isRefresh
+      })
+    },
+    match() {
+      this.instance.post(`/app/xbotCallback/automaticMatch`,null,{
+        params: {
+          managerWxid: this.params.loginUserId
+        }
+      }).then(res => {
+        if(res.code == 0) {
+          this.$message.success('匹配成功!')
+          this.getTableData()
+        }
+      })
+    },
+    edit(row) {
+      this.dialog = true
+      this.editInfo = {...row}
+      this.chooseUserList = [{id: row.managerTpwxid, name: row.managerTpUserName}]
+    },
+    onChooseUser(v) {
+      this.editInfo.wxUserId = v[0].id
+      this.editInfo.managerTpUserName = v[0].name
+      this.editInfo.user = v
+    },
+    onConfirm() {
+      this.$refs.editInfo.validate(v => {
+        if (v) {
+          this.instance.post('/app/xbotCallback/manualMatch', null, {
+            params: {
+              wxUserId: this.editInfo.wxUserId,
+              wxid: this.editInfo.wxid
+            }
+          }).then(res => {
+            if (res?.code == 0) {
+              this.dialog = false
+              this.getTableData()
+              this.$message.success('编辑成功!')
+            }
+          })
+        }
+      })
+    },
+    changeArea(row) {
+      this.showArea = true
+      this.areaInfo = {...row}
+      this.$refs['form'].clearValidate();
+    },
+    areaConfirm() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.instance.post(`app/xbotCallback/updateGroupArea?wxid=${this.areaInfo.wxid}&areaId=${this.areaInfo.areaId}&areaName=${this.areaInfo.areaName}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('所属地区设置成功')
+              this.showArea = false
+              this.getTableData()
+            }
+          })
+        } else {
+          return false
+        }
+      });
+    },
+    changeVillage(row) {
+      if(!row.areaId) return this.$message.error('请先选所属地区')
+      this.instance.post(`app/xbotCallback/residentialQuarters?areaId=${row.areaId}`).then(res => {
+        if (res.code == 0) {
+          this.villageOptions = res.data
+        }
+      })
+      this.showVillage = true
+      this.villageInfo = {...row}
+      this.$refs['villageForm'].clearValidate();
+    },
+    villageConfirm() {
+      this.$refs['villageForm'].validate((valid) => {
+        if (valid) {
+          this.instance.post(`app/xbotCallback/updateGroupResidentialQuarters?wxid=${this.villageInfo.wxid}&residentialQuarters=${this.villageInfo.residentialQuarters}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('所属小区设置成功')
+              this.showVillage = false
+              this.getTableData()
+            }
+          })
+        } else {
+          return false
+        }
+      });
+    },
+
+    selectPerson(val) {
+      if (val) {
+        this.editInfo.managerTpUserName = val.name
+        this.editInfo.wxUserId = val.wxUserId
+      } else {
+        this.editInfo.managerTpUserName = ''
+        this.editInfo.wxUserId = ''
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.GroupList {
+  height: 100%;
+
+  .time-select {
+    padding: 0 16px;
+    height: 32px;
+    line-height: 32px;
+    border: 1px solid #d0d4dc;
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+    .el-icon-arrow-down {
+      line-height: 32px;
+    }
+  }
+
+  :deep .is-error {
+    .time-select {
+      border: 1px solid #f46!important;
+    }
+  }
+  .tips {
+    display: inline-block;
+    color: #999;
+    font-size: 14px;
+    margin-left: 16px;
+  }
+  .group-avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+  }
+  :deep .ai-dialog__content--wrapper {
+    // height: 1000px;
+    // overflow-y: scroll;
+    .ai-table {
+      // height: 1000px;
+    }
+  }
+}
+</style>