完成

packages/wxwork/AppMassNotification/components/Add.vue

@@ -14,27 +14,26 @@
           </template>
 
           <template #content>
-            <el-form class="ai-form" :rules="rules" ref="form" :model="form" label-width="100px" label-position="right">
+            <el-form size="small" class="ai-form" :rules="rules" ref="form" :model="form" label-width="100px" label-position="right">
 
-              <el-form-item label="发送方式" prop="messageSource"  style="width: 50%">
+              <el-form-item label="发送方式" prop="messageSource" style="width: 50%">
                 <el-radio v-model="form.messageSource" label="2">居民群</el-radio>
                 <el-radio v-model="form.messageSource" label="1">居民</el-radio>
               </el-form-item>
 
               <el-form-item label="地区选择" style="width: 100%">
-                <ai-area-get v-model="areaId" :root="areaRootId" :instance="instance" @select="handleAreaSelect" multiple  size="small" placeholder="全部地区"/>
+                <ai-area-get v-model="areaId" :root="areaRootId" :instance="instance" @select="handleAreaSelect" multiple size="small" placeholder="全部地区"/>
               </el-form-item>
 
-              <el-form-item label="选择组织" style="width: 100%">
-                <el-input size="small" :value="orgSelect" placeholder="请选择" disabled />
-                <el-button size="small" type="info" class="selectDeptUser">选择组织</el-button>
-                  <!-- <ai-wechat-selecter slot="append"  refs="addTags" :instance="instance" isChooseUnit isStrictly v-model="orgNameList"  @change="getSelectPerson">
-                    <el-button size="small" type="info">选择组织</el-button>
-                  </ai-wechat-selecter> -->
+              <el-form-item label="发送范围" style="width: 100%">
+                <select-dept-user v-model="form.deptList" v-bind="$props" :source="form.messageSource"/>
+                <!-- <ai-wechat-selecter slot="append"  refs="addTags" :instance="instance" isChooseUnit isStrictly v-model="orgNameList"  @change="getSelectPerson">
+                  <el-button size="small" type="info">选择组织</el-button>
+                </ai-wechat-selecter> -->
                 <!-- </el-input> -->
                 <!-- <ai-table-select nodeName="name" :instance="instance" extra="serialNo" searchKey="name" :action="`/app/wxcp/wxdepartment/listAllByCorp`"
                               @select="organizationSelect" multiple/> -->
-                              <!-- v => formData.serialNo = v.map(e=> e.serialNo).toString() -->
+                <!-- v => formData.serialNo = v.map(e=> e.serialNo).toString() -->
 
               </el-form-item>
 
@@ -60,15 +59,18 @@
               </el-form-item>
               <!-- 图片 -->
               <el-form-item label="图片" style="width: 100%">
-                <ai-uploader :instance="instance" isWechat v-model="imgList" multiple acceptType=".jpg,.png,.jpeg" :limit="9" url="/app/wxcp/upload/uploadFile?type=image"></ai-uploader>
+                <ai-uploader :instance="instance" isWechat v-model="imgList" multiple acceptType=".jpg,.png,.jpeg" :limit="9"
+                             url="/app/wxcp/upload/uploadFile?type=image"></ai-uploader>
               </el-form-item>
               <!-- 视频 -->
               <el-form-item label="视频" style="width: 100%">
-                <ai-uploader :instance="instance" fileType="file" isWechat multiple acceptType=".mp4" v-model="videoList" :limit="9" url="/app/wxcp/upload/uploadFile?type=video"></ai-uploader>
+                <ai-uploader :instance="instance" fileType="file" isWechat multiple acceptType=".mp4" v-model="videoList" :limit="9"
+                             url="/app/wxcp/upload/uploadFile?type=video"></ai-uploader>
               </el-form-item>
               <!-- 附件 -->
               <el-form-item label="附件" style="width: 100%">
-                <ai-uploader :instance="instance" fileType="file" isWechat multiple v-model="filesList" :limit="9" url="/app/wxcp/upload/uploadFile?type=file"></ai-uploader>
+                <ai-uploader :instance="instance" fileType="file" isWechat multiple v-model="filesList" :limit="9"
+                             url="/app/wxcp/upload/uploadFile?type=file"></ai-uploader>
               </el-form-item>
             </el-form>
           </template>
@@ -126,9 +128,11 @@
 
 <script>
 import {mapState} from "vuex";
+import SelectDeptUser from "./SelectDeptUser";
 
 export default {
   name: 'Add',
+  components: {SelectDeptUser},
   props: {
     instance: Function,
     dict: Object
@@ -171,9 +175,9 @@ export default {
       orgSelect: '',
       orgAllList: [],
       rules: {
-        content: [{ required: true, message: '请输入群发内容'}],
-        messageSource: [{ required: true, message: '请选择群发方式' }],
-        sendTime: [{ required: true, message: '请选择群发时间' }],
+        content: [{required: true, message: '请输入群发内容'}],
+        messageSource: [{required: true, message: '请选择群发方式'}],
+        sendTime: [{required: true, message: '请选择群发时间'}],
       },
     }
   },
@@ -181,7 +185,7 @@ export default {
   computed: {
     ...mapState(['user']),
     tagsChange() {
-      if(this.tags?.length) {
+      if (this.tags?.length) {
         return this.form.tag = this.tags.toString();
       }
     },
@@ -220,10 +224,10 @@ export default {
     },
     getSelectPerson(val) {
       console.log(val);
-      this.orgNameList = val?.map(item=> item.name)
-      this.orgIdList = val?.map(e=> e.id).toString();
+      this.orgNameList = val?.map(item => item.name)
+      this.orgIdList = val?.map(e => e.id).toString();
       // this.orgAllList = val
-      this.form.deptList = val?.map(o=>{
+      this.form.deptList = val?.map(o => {
         return {
           corpId: o.corpId,
           // objList: ,
@@ -236,7 +240,7 @@ export default {
       console.log(value);
     },
     // 标签
-    getSubTags () {
+    getSubTags() {
       this.instance.post(`/app/wxcp/wxgroupchattag/listAllByCorp?dvcpId=${this.orgIdList}`).then(res => {
         if (res?.data) {
           console.log(res);
@@ -411,31 +415,34 @@ export default {
   cursor: pointer;
 }
 
-  .tags {
-    // padding: 10px;
-    .tag_title {
-      font-weight: 600;
+.tags {
+  // padding: 10px;
+  .tag_title {
+    font-weight: 600;
+  }
+
+  .tag_item {
+    margin: 5px 0;
+
+    span {
+      display: inline-block;
+      // padding: 5px 10px;
+      width: 80px;
+      text-align: center;
+      height: 30px;
+      line-height: 30px;
+      background: #DDD;
+      color: #333;
+      border-radius: 4px;
+      margin-right: 8px;
     }
-    .tag_item {
-      margin: 5px 0;
-      span {
-        display: inline-block;
-        // padding: 5px 10px;
-        width: 80px;
-        text-align: center;
-        height: 30px;
-        line-height: 30px;
-        background: #DDD;
-        color: #333;
-        border-radius: 4px;
-        margin-right: 8px;
-      }
-      .active {
-        background: #53bcea;
-        color: #FFFFFF;
-      }
+
+    .active {
+      background: #53bcea;
+      color: #FFFFFF;
     }
   }
+}
 
 
 </style>

packages/wxwork/AppMassNotification/components/SelectDeptUser.vue

@@ -0,0 +1,189 @@
+<template>
+  <section class="SelectDeptUser">
+    <el-input :value="selectText" disabled size="small" @click.native="dialog=true">
+      <el-button type="text" slot="append">开始选择</el-button>
+    </el-input>
+    <ai-dialog :visible.sync="dialog" title="选择部门/人员" width="700px" @onConfirm="handleSubmit" @close="selected=[]">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item v-for="(item, index) in selectDeptPath" :key="index">
+          <el-button type="text" @click="deptNameClick(item)">{{ item.name }}</el-button>
+        </el-breadcrumb-item>
+      </el-breadcrumb>
+      <div class="optionsItem" v-for="(row, index) in options" :key="index">
+        <el-row type="flex">
+          <el-checkbox class="fill" :label="row.uid" v-model="row.checked" @change="handleCheck(row,index)">{{ row.name }}</el-checkbox>
+          <el-button type="text" v-if="!row.parentid&&row.kind=='dept'" @click="openDialogTag(row)">添加标签</el-button>
+          <el-button type="text" v-if="row.kind=='dept'" @click="itemClick(row)">更多</el-button>
+        </el-row>
+        <el-tag effect="dark" size="small" v-for="tag in row.selectedTags" :key="tag.id" class="mar-4">{{ tag.name }}</el-tag>
+      </div>
+      <ai-empty v-if="!options.length"/>
+      <ai-dialog :visible.sync="dialogTag" title="选择标签" width="500px" @onConfirm="handleSelectTag" @close="selectedTags=[]" append-to-body>
+        <el-checkbox-group v-model="selectedTags">
+          <div class="optionsItem" v-for="(cls, index) in tagOps" :key="index">
+            <ai-title :title="cls.name"/>
+            <el-checkbox class="fill" v-for="(op, i) in cls.tagList" :key="i" :label="op.id">{{ op.name }}</el-checkbox>
+          </div>
+        </el-checkbox-group>
+        <ai-empty v-if="!tagOps.length"/>
+      </ai-dialog>
+    </ai-dialog>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "SelectDeptUser",
+  model: {
+    event: "change",
+    prop: "value"
+  },
+  props: {
+    value: {default: ""},
+    instance: Function,
+    dict: Object,
+    source: {default: 1}
+  },
+  computed: {
+    selectText: v => !!v.value ? "已选择" : "请选择",
+    tagAction: v => v.source == 1 ? '/app/wxcp/wxgroupchattag/listAllByCorp' : '/app/wxcp/wxcorptag/listAllByCorp'
+  },
+  data() {
+    return {
+      dialog: false,
+      dialogTag: false,
+      currentCorp: {},
+      selected: [],
+      selectDeptPath: [],
+      selectedTags: [],
+      options: [],
+      tagOps: [],
+      allData: [],
+      tags: {}
+    }
+  },
+  methods: {
+    getDepts() {
+      this.instance.post('/app/wxcp/wxdepartment/listAllByCorp').then(res => {
+        if (res?.data) {
+          let parents = res.data.map(e => e.parentid)
+          this.allData = res.data.map(e => ({
+            ...e,
+            hasChildren: parents.includes(e.id),
+            uid: [e.corpId, e.id].join("_"),
+            kind: 'dept',
+            checked: false
+          }))
+          this.deptInit()
+        }
+      })
+    },
+    getTagsByCorp(dvcpCorpId) {
+      return this.instance.post(this.tagAction, null, {
+        params: {dvcpCorpId, size: 9999}
+      }).then(res => {
+        if (res?.data) {
+          return this.tagOps = res.data.records || []
+        }
+      })
+    },
+    deptInit() {
+      this.options = this.allData.filter(e => !e.parentid)
+      this.selectDeptPath = [{name: "可选范围", id: ''}]
+    },
+    itemClick(row) {
+      let index = this.selectDeptPath.findIndex(e => e.id == row.id)
+      if (index == -1) {
+        this.selectDeptPath.push(row)
+        this.getDeptsAndUsersByParent(row)
+      }
+    },
+    getDeptsAndUsersByParent(row) {
+      let {id: departmentId, corpId: cid} = row
+      this.options = this.allData.filter(e => e.parentid == departmentId && e.corpId == cid) || []
+      this.instance.post(`/app/wxcp/wxuser/listByDeptId`, null, {
+        params: {departmentId, status: 1, cid}
+      }).then(res => {
+        if (res?.data) {
+          res.data = res.data.map(e => ({...e, kind: "user"}))
+          this.options = [this.options, res.data].flat()
+        }
+      })
+    },
+    deptNameClick(row, index) {
+      if (!index) { //第一级别
+        this.deptInit()
+      } else {
+        let length = this.selectDeptPath.length - index
+        this.selectDeptPath.splice(index + 1, length)
+        this.getDeptsAndUsersByParent(row.id)
+      }
+    },
+    openDialogTag(row) {
+      this.getTagsByCorp(row.corpId).then(() => {
+        this.currentCorp = row
+        this.dialogTag = true
+      })
+    },
+    handleSelectTag() {
+      let {corpId} = this.currentCorp
+      this.currentCorp.selectedTags = this.$copy(this.tagOps.map(e => e.tagList).flat().filter(e => this.selectedTags.includes(e.id)))
+      this.tags[corpId] = this.$copy(this.currentCorp.selectedTags)
+      this.dialogTag = false
+    },
+    handleSubmit() {
+      let result = {}
+      this.selected?.map(e => {
+        let {kind, id} = e
+        result[e.corpId] = [result[e.corpId], {kind, id}].flat()
+      })
+      let selected = Object.keys(result).map(corpId => {
+        let res
+        if (result[corpId]) {
+          res = {
+            corpId,
+            objList: result[corpId].filter(e => !!e)
+          }
+          if (this.tags[corpId]?.length > 0) {
+            res.tagId = this.tags[corpId]?.map(e => e.id)
+          }
+        }
+        return res
+      }).filter(e => !!e)
+      this.$emit("change", selected)
+      this.dialog = false
+    },
+    isSelected(uid) {
+      return !!this.selected.find(e => e.uid == uid)
+    },
+    handleCheck(row, i) {
+      row.checked = !row.checked
+      if (row.checked) {
+        this.selected.push(row)
+      } else {
+        this.selected.splice(i, 1)
+      }
+      this.$forceUpdate()
+    }
+  },
+  created() {
+    this.getDepts()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.SelectDeptUser {
+  ::v-deep.optionsItem {
+    border: 1px solid #eee;
+    margin-bottom: 8px;
+    padding: 8px;
+    border-radius: 4px;
+
+    .mar-4 {
+      margin-right: 4px;
+      margin-bottom: 4px;
+    }
+  }
+}
+</style>