更换人员选择器

src/saas/AppGridManagement/AddGird.vue

@@ -4,13 +4,13 @@
       <div class="label">
         <span class="tips"></span>网格类型
       </div>
-      <div class="value">{{$dict.getLabel('girdType', form.girdType)}}</div>
+      <div class="value">{{ $dict.getLabel('girdType', form.girdType) }}</div>
     </div>
     <div class="item-flex">
       <div class="label">
         <span class="tips"></span>网格层级
       </div>
-      <div class="value">{{$dict.getLabel('girdLevel', form.girdLevel)}}</div>
+      <div class="value">{{ $dict.getLabel('girdLevel', form.girdLevel) }}</div>
     </div>
 
     <div class="item-flex">
@@ -18,7 +18,8 @@
         <span class="tips">*</span>网格名称
       </div>
       <div class="value">
-        <u-input type="text" placeholder="请输入" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48" v-model="form.girdName" maxlength="50" />
+        <u-input type="text" placeholder="请输入" input-align="right" placeholder-style="color:#999;font-size:16px;"
+                 height="48" v-model="form.girdName" maxlength="50"/>
       </div>
     </div>
     <div class="item-flex">
@@ -26,25 +27,25 @@
         <span class="tips"></span>网格长
       </div>
       <div class="value" @click="toAddUser('manage')">
-        
+
         <span v-if="form.girdMemberManageList && form.girdMemberManageList.length">
           <!-- <span v-for="(item, index) in form.girdMemberManageList" :key="index"><span v-if="index>0">,</span>{{item.name}}</span> -->
-          已选择<span style="color:#3F8DF5;margin:0 4px;">{{form.girdMemberManageList.length}}</span>人
+          已选择<span style="color:#3F8DF5;margin:0 4px;">{{ form.girdMemberManageList.length }}</span>人
         </span>
         <span style="color:#999;" v-else>请选择</span>
-        <img src="./components/img/right-icon.png" alt="" /></div>
+        <img src="./components/img/right-icon.png" alt=""/></div>
     </div>
     <div class="item-flex" v-if="form.girdLevel == 2">
       <div class="label">
         <span class="tips"></span>网格员
       </div>
-      <div class="value" @click="toAddUser('Member')">
+      <div class="value" @click="toAddUser('member')">
         <span v-if="form.girdMemberList && form.girdMemberList.length">
-          已选择<span style="color:#3F8DF5;margin:0 4px;">{{form.girdMemberList.length}}</span>人
+          已选择<span style="color:#3F8DF5;margin:0 4px;">{{ form.girdMemberList.length }}</span>人
           <!-- <span v-for="(item, index) in form.girdMemberList" :key="index"><span v-if="index>0">,</span>{{item.name}}</span> -->
         </span>
         <span style="color:#999;" v-else>请选择</span>
-        <img src="./components/img/right-icon.png" alt="" />
+        <img src="./components/img/right-icon.png" alt=""/>
       </div>
     </div>
     <div class="footer" @click="confirm">确认添加</div>
@@ -52,6 +53,8 @@
 </template>
 
 <script>
+import {mapActions} from "vuex";
+
 export default {
   data() {
     return {
@@ -62,42 +65,32 @@ export default {
       },
       detailInfo: {},
       fromType: 'add', //add新增 edit编辑,
-      addUserType: 'manage', //manage网格长 Member管理员
     }
-  },
-  methods: {
-   
   },
   onLoad(option) {
     this.$dict.load('girdType', 'girdLevel').then(() => {
       this.id = option.id
       this.fromType = option.fromType
       this.getDetail()
-      uni.$on('selectUser', res => {
-        if(this.addUserType == 'manage') {
-          this.form.girdMemberManageList = res
-        }else {
-          this.form.girdMemberList = res
-        }
-      })
     })
   },
   onShow() {
     document.title = '添加网格'
   },
   methods: {
+    ...mapActions(['selectPrivilegedContact']),
     getDetail() {
       this.$http.post(`/app/appgirdinfo/queryDetailById?id=${this.id}`).then((res) => {
         if (res.code == 0) {
           this.detailInfo = res.data
-          if(this.fromType == 'edit') {
+          if (this.fromType == 'edit') {
             this.form = res.data
           }
-          if(this.fromType == 'add') {
+          if (this.fromType == 'add') {
             this.form.parentGirdId = this.detailInfo.id
             this.form.parentGirdName = this.detailInfo.girdName
-            this.form.girdLevel = Number(this.detailInfo.girdLevel)+1
+            this.form.girdLevel = Number(this.detailInfo.girdLevel) + 1
-            this.form.girdType = Number(this.detailInfo.girdType)+1
+            this.form.girdType = Number(this.detailInfo.girdType) + 1
             this.form.isLastLevel = this.form.girdLevel == 2 ? '1' : '0'
             this.$forceUpdate()
           }
@@ -105,51 +98,31 @@ export default {
       })
     },
     toAddUser(type) {
-      this.addUserType = type
+      let obj = type == 'manage' ? "girdMemberManageList" : "girdMemberList",
-      var selectUserList = []
+          selectedOpenUserIds = this.form?.[obj]?.map(e => e.wxUserId) || []
-      if(type == 'manage') {
+      selectedOpenUserIds = selectedOpenUserIds || []
-        selectUserList = this.form.girdMemberManageList
+      this.$loading()
-      }else {
+      this.selectPrivilegedContact({
-        selectUserList = this.form.girdMemberList
+        fromDepartmentId: 0, selectedOpenUserIds,
-      }
+        selectedTickets: this.form?.[type + "Ticket"] || [],
-      uni.setStorageSync('selectUserList', selectUserList)
+      }).then(res => {
-      uni.navigateTo({url: `./SelectUser`})
+        uni.hideLoading()
+        this.form[obj] = res.userList?.map(e => ({id: e.openUserId})) || []
+        this.form[type + "Ticket"] = res.selectedTicket
+      }).catch(() => {
+        uni.hideLoading()
+      })
     },
     confirm() {
-      if(!this.form.girdName){
+      if (!this.form.girdName) {
         return this.$u.toast('请输入网格名称')
       }
-
+      this.$http.post(`/app/appgirdinfo/addOrUpdateByEw`, {...this.form}).then((res) => {
-      var girdMemberManageList = []
-      if(this.form.girdMemberManageList && this.form.girdMemberManageList.length) {
-        girdMemberManageList = this.form.girdMemberManageList.map((item) => {
-          return {
-            wxUserId: item.id,
-            phone: item.mobile,
-            photo: item.avatar,
-            name: item.name
-          }
-        })
-      }
-
-      var girdMemberList = []
-      if(this.form.girdMemberList && this.form.girdMemberList.length) {
-        girdMemberList = this.form.girdMemberList.map((item) => {
-          return {
-            wxUserId: item.id,
-            phone: item.mobile,
-            photo: item.avatar,
-            name: item.name
-          }
-        })
-      }
-      
-      this.$http.post(`/app/appgirdinfo/addOrUpdateByEw`, {...this.form, girdMemberManageList, girdMemberList}).then((res) => {
         if (res.code == 0) {
           this.$u.toast('提交成功')
           uni.$emit('update')
           setTimeout(() => {
-            uni.navigateBack()
+            uni.navigateBack({})
           }, 600)
         }
       }).catch((err) => {
@@ -163,42 +136,48 @@ export default {
 
 <style lang="scss" scoped>
 .AddGird {
-  .item-flex{
+  .item-flex {
     display: flex;
     padding: 34px 32px;
     background-color: #fff;
     font-size: 32px;
     font-family: PingFangSC-Regular, PingFang SC;
     margin-bottom: 16px;
-    .label{
+
+    .label {
       font-weight: 400;
       color: #333333;
       line-height: 22px;
       width: 150px;
-      .tips{
+
+      .tips {
         display: inline-block;
         width: 16px;
         color: #F46;
         line-height: 44px;
       }
     }
-    .value{
+
+    .value {
       width: calc(100% - 150px);
       line-height: 44px;
       text-align: right;
       color: #666;
-      img{
+
+      img {
         width: 32px;
         height: 32px;
         vertical-align: middle;
         margin-left: 8px;
       }
     }
-    .color-999{
+
+    .color-999 {
       color: #999;
     }
   }
-  .footer{
+
+  .footer {
     width: 100%;
     height: 112px;
     line-height: 112px;