消息推送

src/components/AiPagePicker.vue

@@ -32,6 +32,7 @@ export default {
         sysUser: {url: "/components/pages/selectSysUser", label: "name"},
         gird: {url: "/components/pages/selectGird", label: "girdName"},
         party: {url: "/components/pages/selectParty", label: "name"},
+        dept: {url: "/components/pages/selectDept", label: "name"},
         custom: {...this.ops}
       },
     }

src/components/pages/selectDept.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="selectDept">
+    <AiTopFixed>
+      <u-search placeholder="搜索" v-model="name" :show-action="false" @change="getList()"/>
+    </AiTopFixed>
+    <div class="user-list">
+      <template v-if="list.length>0">
+        <div class="item" v-for="(item, index) in list" :key="index">
+          <div class="select-img" @click="checkClick(index)">
+            <img :src="item.isCheck ? checkIcon : cirIcon" alt="">
+          </div>
+          <div class="user-info">{{ item.name }}</div>
+        </div>
+      </template>
+      <template v-else>
+        <AiEmpty/>
+        <div class="pad-b118"/>
+      </template>
+    </div>
+    <div class="pad-b118"/>
+    <div class="footer">
+      <div class="btn" @click="confirm">确定选择</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  name: "selectDept",
+  appName: "选择部门",
+  data() {
+    return {
+      current: 1,
+      total: 0,
+      name: '',
+      list: [],
+      cirIcon: require('./img/xz.png'),
+      checkIcon: require('./img/xzh.png'),
+      selected: []
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+    isSingle() {
+      return this.$route.query.single
+    },
+    nodeKey() {
+      return this.$route.query.nodeKey || "idNumber"
+    }
+  },
+  onLoad(query) {
+    console.log(query)
+    if (query.selected) {
+      this.selected = query.selected?.split(",") || []
+    }
+    this.selected.map((item, index) => {
+      this.selected[index] = parseInt(item)
+    })
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.$http.post(`/app/wxcp/wxdepartment/listAll?name=${this.name}`).then(res => {
+        if (res?.data) {
+          res.data.forEach(e => {
+            e.isCheck = this.selected.includes(e[this.nodeKey])
+          })
+          this.list = res.data
+        }
+      })
+    },
+    checkClick(index) {
+      if (this.isSingle) {
+        this.list.map((e, i) => {
+          e.isCheck = i == index;
+        })
+      } else this.list[index].isCheck = !this.list[index].isCheck
+
+    },
+    confirm() {
+      let checkList = []
+      this.list.map((item) => {
+        if (item.isCheck) {
+          checkList.push(item)
+        }
+      })
+      if (!checkList.length) {
+        return this.$u.toast('请先选择部门')
+      } else {
+        uni.navigateBack({
+          success: () => {
+            uni.$emit("pagePicker:dept", checkList)
+          }
+        })
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.selectDept {
+  ::v-deep .AiTopFixed .u-search {
+    margin-bottom: 0 !important;
+  }
+
+  .pad-b118 {
+    padding-bottom: 118px;
+  }
+
+  .user-list {
+    background-color: #fff;
+
+    .item {
+      .select-img {
+        display: inline-block;
+
+        img {
+          width: 48px;
+          height: 48px;
+          margin: 12px 36px 12px 30px;
+          vertical-align: middle;
+        }
+      }
+
+      .user-info {
+        display: inline-block;
+        padding: 20px 0 20px 0;
+        width: calc(100% - 114px);
+        height: 100%;
+        border-bottom: 1px solid #E4E5E6;
+        font-size: 36px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333;
+        line-height: 74px;
+
+        img {
+          width: 74px;
+          height: 74px;
+          border-radius: 8px;
+          margin-right: 34px;
+          vertical-align: bottom;
+        }
+      }
+    }
+  }
+
+  .footer {
+    width: 100%;
+    height: 118px;
+    background: #F4F8FB;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    text-align: right;
+
+    .btn {
+      display: inline-block;
+      width: 192px;
+      height: 80px;
+      line-height: 80px;
+      background: #1365DD;
+      border-radius: 4px;
+      text-align: center;
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #FFF;
+      margin: 20px 34px 0 0;
+    }
+  }
+}
+</style>

src/project/police/AppMessageNotification/AppMessageNotification.vue

@@ -9,7 +9,7 @@
       <div class="label color-666">用户选择</div>
       <div class="right" @click="toSelect">
         <span>
-          <span v-if="!areaIdList.length && !tagIdList.length">全部</span>
+          <span v-if="!areaIdList.length && !tagIdList.length && !deptList.length && !userList.length">全部</span>
           <span v-else>已选择<!-- <span class="color-1365DD">10</span>人 --></span>
         </span>
         <img src="./components/img/right-icon.png" alt="">
@@ -39,24 +39,24 @@
         <u-input v-model="form.content" type="textarea" :height="400" auto-height maxlength="1000" placeholder="请输入文本内容" />
         <div class="hint">{{ form.content.length }}/1000</div>
       </div>
-      <div class="type">
+      <!-- <div class="type">
         <p class="color-666">其它类型</p>
         <u-radio-group v-model="form.contentType">
           <u-radio v-for="(item, index) in typeList" :key="index" :name="item.type" @change="radioChange" > {{item.name}}</u-radio>
         </u-radio-group>
-      </div>
+      </div> -->
       <div class="type-content">
-        <div class="flex" v-if="form.contentType == 'image'">
+        <div class="flex">
           <p class="label" style="width:40px;">图片</p>
-          <AiUploader :def.sync="formData.fileList" :limit="1" @data="(v) => fileData = v"></AiUploader>
+          <AiUploader type="image" :def.sync="formData.fileListImg" :limit="1" @data="(v) => fileDataImg = v"></AiUploader>
         </div>
-        <div class="flex" v-if="form.contentType == 'video'">
+        <div class="flex" >
           <p class="label" style="width:40px;">视频</p>
-          <AiUploader type="video" :limit="1" placeholder="上传视频" :def.sync="formData.fileList" @data="(v) => fileData = v"></AiUploader>
+          <AiUploader type="video" :limit="1" placeholder="上传视频" :def.sync="formData.fileListVideo" @data="(v) => fileDataVideo = v"></AiUploader>
         </div>
-        <div class="flex" v-if="form.contentType == 'file'">
+        <div class="flex">
           <p class="label" style="width:40px;">附件</p>
-          <AiUploader type="file" :limit="1" placeholder="上传附件" :def.sync="formData.fileList" @data="(v) => fileData = v"></AiUploader>
+          <AiUploader type="file" :limit="1" placeholder="上传附件" :def.sync="formData.fileListFile" @data="(v) => fileDataFile = v"></AiUploader>
         </div>
         <div v-if="form.contentType == 'link'">
           <div class="flex border-b">
@@ -144,6 +144,9 @@ export default {
         sendTime: ''
       },
       formData: {
+        fileListImg: [],
+        fileListVideo: [],
+        fileListFile: [],
         fileList: [],
         imgList: [],
         accessImgurl: '',
@@ -155,6 +158,8 @@ export default {
       },
       areaIdList: [],
       tagIdList: [],
+      deptList: [],
+      userList: [],
       timeShow: false,
       timeParams: {
         year: true,
@@ -164,19 +169,20 @@ export default {
         minute: true,
         second: true
       },
-      fileData: null
+      fileDataImg: null,
+      fileDataVideo: null,
+      fileDataFile: null
     }
   },
   computed: {...mapState(['user'])},
   methods: {
     radioChange(e) {
-      this.formDataInit()
+      // this.$nextTick(() => {
-      this.$nextTick(() => {
+      //   this.form.contentType = e
-        this.form.contentType = e
+      // })
-      })
 		},
     toSelect() {
-      uni.navigateTo({url: `./SelectUser?tagIdList=${this.tagIdList}&areaList=${this.areaIdList}`})
+      uni.navigateTo({url: `./chooseUser?tagIdList=${this.tagIdList}&areaList=${this.areaIdList}&deptList=${this.deptList}&userList=${this.userList}`})
     },
     timeSelect(e) {
       var nowTime = new Date().getTime() * 1
@@ -192,6 +198,7 @@ export default {
       // if(!this.areaIdList.length) {
       //   return this.$u.toast('请选择用户')
       // }
+      this.$loading()
       if(this.form.sendType == 1 && !this.form.sendTime) {
         return this.$u.toast('请选择群发时间')
       }
@@ -207,16 +214,48 @@ export default {
       if(this.form.contentType == 'file' && !this.formData.fileList.length) {
         return this.$u.toast('请上传文件')
       }
-      if(this.formData.fileList.length) {
+      this.formData.fileList = []
-        this.formData.file = this.formData.fileList[0]
+      var contentFile = {
-        this.formData.accessUrl = this.formData.fileList[0].url
+        content: this.form.content,
-        this.formData.mediaId = this.fileData.media.mediaId
+        contentType: 'text'
+      }
+      // if(this.formData.fileList.length) {
+      //   this.formData.file = this.formData.fileList[0]
+      //   this.formData.accessUrl = this.formData.fileList[0].url
+      //   this.formData.mediaId = this.fileData.media.mediaId
+      // }
+      this.formData.fileList.push(contentFile)
+      if(this.formData.fileListImg.length) {
+        var info = {
+          contentType: 'image',
+          mediaId: this.fileDataImg.media.mediaId,
+          accessUrl: this.formData.fileListImg[0].url
+        }
+        this.formData.fileList.push(info)
+      }
+      if(this.formData.fileListVideo.length) {
+        var info = {
+          contentType: 'video',
+          mediaId: this.fileDataVideo.media.mediaId,
+          accessUrl: this.formData.fileListVideo[0].url
+        }
+        this.formData.fileList.push(info)
+      }
+      if(this.formData.fileListFile.length) {
+        var info = {
+          contentType: 'file',
+          mediaId: this.fileDataFile.media.mediaId,
+          accessUrl: this.formData.fileListFile[0].url
+        }
+        this.formData.fileList.push(info)
       }
       var params = {
         ...this.form, 
         ...this.formData,
         areaId: this.areaIdList.join(','),
         tag: this.tagIdList.join(','),
+        deptList: this.deptList,
+        userList: this.userList
       }
       this.$http.post("/app/pushmessage/addOrUpdate", params).then(res => {
         if (res?.code == 0) {
@@ -241,9 +280,9 @@ export default {
       for(let key in this.formData) {
         this.formData[key] = ''
       }
-      this.formData.imgList = []
+      this.formData.fileListImg = []
-      this.formData.fileList = []
+      this.formData.fileListVideo = []
-      this.formData.file = {}
+      this.formData.fileListFile = []
     },
     back() {
       uni.navigateBack()
@@ -255,6 +294,8 @@ export default {
     uni.$on('selectTag', res => {
       this.tagIdList = res.tagIdList
       this.areaIdList = res.areaIdList
+      this.deptList = res.deptList
+      this.userList = res.userList
     })
   },
 }

src/project/police/AppMessageNotification/chooseUser.vue

@@ -1,40 +1,36 @@
 <template>
-  <section class="SelectUser">
+  <section class="chooseUser">
-
     <div class="select-content">
       <div class="area-flex">
         <p class="title">地区</p>
-        <AiAreaPicker v-model="areaList" multiple>
+        <AiAreaPicker v-model="areaList" multiple class="value">
           <span class="label" v-if="areaList.length">已选择</span>
           <span v-else style="color:#999;">请选择</span>
-          <u-icon name="arrow-down" color="#666" size="24"/>
+          <u-icon name="arrow-right" color="#999" size="24" style="margin-left:8px;" />
         </AiAreaPicker>
       </div>
       <div class="area-flex">
         <p class="title">部门</p>
-        <AiAreaPicker v-model="areaList" multiple>
+        <div class="value">
-          <span class="label" v-if="areaList.length">已选择</span>
+          <AiPagePicker type="dept" :selected.sync="deptList" nodeKey="id">
-          <span v-else style="color:#999;">请选择</span>
+            <AiMore v-model="moreTextDept" />
-          <u-icon name="arrow-down" color="#666" size="24"/>
+          </AiPagePicker>
-        </AiAreaPicker>
+        </div>
       </div>
       <div class="area-flex">
         <p class="title">人员</p>
-        <AiAreaPicker v-model="areaList" multiple>
+        <div class="value">
-          <span class="label" v-if="areaList.length">已选择</span>
+          <AiPagePicker type="sysUser" :selected.sync="userList" action="/app/wxcp/wxuser/list?status=1" nodeKey="id">
-          <span v-else style="color:#999;">请选择</span>
+            <AiMore v-model="moreText" />
-          <u-icon name="arrow-down" color="#666" size="24"/>
+          </AiPagePicker>
-        </AiAreaPicker>
+        </div>
       </div>
       
       <div class="type-content">
-        <p class="title">选择标签</p>
+        <div class="type-list" v-for="(item, index) in tagList" :key="index">
-        <div class="type-list">
+          <p>{{item.name}}</p>
-          <div v-for="(item, index) in tagList" :key="index">
+          <div class="list">
-            <p>{{item.name}}</p>
+            <div class="item" :class="items.isCheck ? 'active' : ''" v-for="(items, indexs) in item.tagList" :key="indexs" @click="typeClick(index, indexs)">{{items.name}}</div>
-            <div class="list">
-              <div class="item" :class="items.isCheck ? 'active' : ''" v-for="(items, indexs) in item.tagList" :key="indexs" @click="typeClick(index, indexs)">{{items.name}}</div>
-            </div>
           </div>
         </div>
       </div>
@@ -49,7 +45,7 @@
 import {mapState} from 'vuex'
 
 export default {
-  name: "SelectUser",
+  name: "chooseUser",
   data() {
     return {
       value: '',
@@ -57,10 +53,20 @@ export default {
       areaName: '',
       areaList: [],
       tagList: [],
-      tagIdList: []
+      tagIdList: [],
+      userList: [],
+      deptList: [],
     }
   },
-  computed: {...mapState(['user'])},
+  computed: {
+    ...mapState(['user']),
+    moreText() {
+      if(this.userList.length) return '已选择'
+    },
+    moreTextDept() {
+      if(this.deptList.length) return '已选择'
+    },
+  },
   methods: {
     getTagList() {
       this.$http.post("/app/wxcp/wxcorptag/listAll?size=100").then(res => {
@@ -95,37 +101,79 @@ export default {
       // if(!this.tagIdList.length) {
       //   return this.$u.toast('请选择标签')
       // }
+      var userIdList = [], deptIdList = []
+      this.userList.map((item) => {
+        userIdList.push(item.id)
+      })
+      this.deptList.map((item) => {
+        deptIdList.push(item.id)
+      })
       uni.$emit('selectTag', {
         areaIdList: this.areaList,
-        tagIdList: this.tagIdList
+        tagIdList: this.tagIdList,
+        userList: userIdList,
+        deptList: deptIdList
       })
       uni.navigateBack({})
-    }
+    },
+    toSelectDept() {
+      uni.navigateTo({ url: `./selectDept` })
+    },
   },
   onShow() {
     document.title = '人员选择'
   },
   onLoad(option) {
+    console.log(option)
     this.areaId = this.user.areaId
     this.areaName = this.user.areaName
     if(option.areaList) {
       this.areaList = option.areaList.split(',')
+    }
+    if(option.tagIdList) {
       this.tagIdList =  option.tagIdList.split(',')
     }
+    if(option.userList) {
+      var list = option.userList.split(',')
+      list.map(item => {
+        var info = {
+          id: item
+        }
+        this.userList.push(info)
+      })
+      
+    }
+    if(option.deptList) {
+      var list = option.deptList.split(',')
+      list.map(item => {
+        var info = {
+          id: item
+        }
+        this.deptList.push(info)
+      })
+    }
     this.getTagList()
   },
 }
 </script>
 <style lang="scss" scoped>
-.SelectUser {
+.chooseUser {
   .select-content{
     .area-flex{
       display: flex;
       justify-content: space-between;
-      padding: 34px 32px 0;
+      padding: 32px;
       line-height: 44px;
       margin-bottom: 16px;
       background-color: #fff;
+      .title{
+        width: 150px;
+        margin-bottom: 0;
+      }
+      .value{
+        width: calc(100% - 150px);
+        text-align: right;
+      }
     }
     .area-content{
       padding: 16px 32px 32px;
@@ -154,16 +202,11 @@ export default {
       height: 32px;
       margin-right: 4px;
     }
-    .AiAreaPicker{
-      margin-bottom: 24px;
-    }
-    .type-content{
-      padding: 34px 32px;
-      background-color: #fff;
-    }
     .type-list{
       padding-left: 16px;
-      margin-top: 32px;
+      margin-bottom: 16px;
+      padding: 34px 32px 32px;
+      background-color: #fff;
       p{
         line-height: 44px;
         margin-bottom: 24px;
@@ -172,20 +215,19 @@ export default {
       }
       .list{
         overflow: hidden;
-        margin-bottom: 32px;
         .item{
-          padding: 0 32px;
+          padding: 12px 32px;
-          line-height: 56px;
           float: left;
-          text-align: center;
+          font-size: 28px;
-          border-radius: 28px;
+          font-family: PingFangSC-Regular, PingFang SC;
-          border: 1px solid #ddd;
+          color: #333;
+          line-height: 40px;
+          background-color: #F3F4F7;
+          border-radius: 4px;
           margin: 0 16px 16px 0;
-          font-size: 30px;
         }
         .active{
           background-color: #3192F4;
-          border: 1px solid #3192F4;
           color: #fff;
         }
       }
@@ -215,6 +257,9 @@ export default {
       color: #333;
     }
   }
+  ::v-deep .u-icon__label{
+    font-size: 28px!important;
+  }
   
 }
 </style>