协同宣发

project/sass/apps/Announce/AppAnnounce/components/Add.vue

@@ -10,25 +10,37 @@
           <ai-card title="基本信息">
             <template #content>
               <div class="ai-form">
-                <el-form-item label="任务名称" prop="name" style="width: 100%;" :rules="[{ required: true, message: '请输入任务名称', trigger: 'blur' }]">
+                <el-form-item label="任务名称" prop="taskTitle" style="width: 100%;" :rules="[{ required: true, message: '请输入任务名称', trigger: 'blur' }]">
                   <el-input size="small" placeholder="请输入任务名称" v-model="form.taskTitle" :maxlength="15" show-word-limit></el-input>
                 </el-form-item>
-                <el-form-item label="发送范围" style="width: 100%;" prop="sendScope">
-                  <el-radio-group v-model="form.sendScope">
+                <el-form-item label="发送范围" style="width: 100%;" prop="sendScope" :rules="[{ required: true, message: '请选择发送范围', trigger: 'change' }]">
+                  <el-radio-group v-model="form.sendScope" @change="onScopeChange">
                     <el-radio label="0">全部居民群</el-radio>
                     <el-radio label="1">按部门选择</el-radio>
                     <el-radio label="2">按网格选择</el-radio>
                   </el-radio-group>
                 </el-form-item>
-                <el-form-item label="选择群主" prop="departmentName" style="width: 100%;" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
-                  <el-input size="small" :autosize="{ minRows: 2, maxRows: 10}" placeholder="请选择..." disabled v-model="form.departmentName">
-                    <ai-user-get slot="append" isStrictly :instance="instance" isChooseUnit>
-                      <el-button type="info">选择</el-button>
-                    </ai-user-get>
-                  </el-input>
+                <el-form-item label="选择群主" v-if="form.sendScope !== '0'" prop="wxGroupsName" style="width: 100%;" :rules="[{ required: true, message: '请选择选择群主', trigger: 'change' }]">
+                  <div class="AppAnnounceDetail-select">
+                    <el-input size="small" class="AppAnnounceDetail-select__input" placeholder="请选择..." disabled v-model="form.wxGroupsName"></el-input>
+                    <div class="select-left" v-if="form.groupIds.length">
+                      <span v-for="(item, index) in form.groupIds" :key="index">
+                        <ai-open-data type="departmentName" :openid="item"></ai-open-data>
+                      </span>
+                    </div>
+                    <i v-if="!form.groupIds.length">请选择</i>
+                    <ai-picker
+                      :instance="instance"
+                      multiple
+                      :action="form.sendScope === '1' ? '/app/wxcp/wxdepartment/departList' : '/app/appgirdinfo/girdList'"
+                      v-model="form.groupIds"
+                      @change="onSelcetChange">
+                      <div class="select-right">选择</div>
+                    </ai-picker>
+                  </div>
                   <div class="tips">
                     <p>消息预计送达居民群数：</p>
-                    <span>215</span>
+                    <span>{{ form.groupIds.length }}</span>
                     <el-tooltip
                       placement="top"
                       content="任务开始后，3天内15分钟更新1次，3天后访问页面时触发更新，1时间最多刷新1次">
@@ -36,7 +48,7 @@
                     </el-tooltip>
                   </div>
                 </el-form-item>
-                <el-form-item label="发送内容" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
+                <el-form-item label="发送内容" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入发送内容', trigger: 'blur' }]">
                   <el-input size="small" type="textarea" :rows="6" placeholder="请输入文本内容..." v-model="form.content"></el-input>
                   <div class="add">
                     <div class="fileList" v-if="fileList.length">
@@ -126,12 +138,19 @@
                     active-text="开启后，创建的群发任务需要审批人进行审批">
                   </el-switch>
                 </el-form-item>
-                <el-form-item v-if="form.enableExamine === '1'" label="审批人员" prop="departmentName" style="width: 100%;" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
-                  <el-input size="small" :autosize="{ minRows: 2, maxRows: 10}" placeholder="请选择..." disabled v-model="form.departmentName">
-                    <ai-user-get slot="append" isStrictly :instance="instance" isChooseUnit>
-                      <el-button type="info">选择</el-button>
+                <el-form-item v-if="form.enableExamine === '1'" label="审批人员" prop="examines" style="width: 100%;" :rules="[{ required: true, message: '请选择审批人员', trigger: 'change' }]">
+                  <div class="AppAnnounceDetail-select">
+                    <el-input class="AppAnnounceDetail-select__input" size="small" placeholder="请选择..." v-model="form.examinesName"> </el-input>
+                    <div class="select-left" v-if="form.examines.length">
+                      <span v-for="(item, index) in form.examines" :key="index">
+                        <ai-open-data type="userName" :openid="item.id"></ai-open-data>
+                      </span>
+                    </div>
+                    <i v-if="!form.examines.length">请选择</i>
+                    <ai-user-get :instance="instance" v-model="form.examines" @change="onUserChange">
+                      <div class="select-right">选择</div>
                     </ai-user-get>
-                  </el-input>
+                  </div>
                 </el-form-item>
               </div>
             </template>
@@ -143,7 +162,9 @@
           <div class="right-content">
             <div class="msg-list">
               <div class="msg-item" v-if="form.content">
-                <div class="msg-item__left"></div>
+                <div class="msg-item__left">
+                  <img v-if="user.info.avatar" :src="user.info.avatar" />
+                </div>
                 <div class="msg-item__right">
                   <div class="msg-wrapper msg-text">
                     <p>{{ form.content }}</p>
@@ -151,7 +172,9 @@
                 </div>
               </div>
               <div class="msg-item" v-for="(item, index) in fileList" :key="index">
-                <div class="msg-item__left"></div>
+                <div class="msg-item__left">
+                  <img v-if="user.info.avatar" :src="user.info.avatar" />
+                </div>
                 <div class="msg-item__right" :class="[['1', '2'].indexOf(item.msgType) !== -1 ? 'left-border' : '']">
                   <div class="msg-wrapper msg-img" v-if="item.msgType === '1'">
                     <img :src="item.url" />
@@ -256,13 +279,14 @@
     </template>
     <template #footer>
       <el-button @click="cancel">取消</el-button>
-      <el-button type="primary" @click="confirm" style="width: 120px;">通知成员发送</el-button>
-      <el-button type="primary" @click="confirm">定时发送</el-button>
+      <el-button type="primary" @click="confirm(0)" style="width: 120px;">通知成员发送</el-button>
+      <el-button type="primary" @click="confirm(1)">定时发送</el-button>
     </template>
   </ai-detail>
 </template>
 
 <script>
+  import { mapActions, mapState } from 'vuex'
   export default {
     name: 'Add',
 
@@ -297,10 +321,13 @@
           enableExamine: '0',
           examines: [],
           wxGroups: [],
+          groupIds: [],
+          wxGroupsName: '',
           sendScope: '0',
           sendType: 0,
           name: '',
-          taskTitle: ''
+          taskTitle: '',
+          examinesName: ''
         },
         id: '',
         tagsList: []
@@ -317,25 +344,22 @@
       }
     },
 
+    computed: {
+      ...mapState(['user'])
+    },
+
     created () {
-      this.getTags()
-
-      if (this.params && this.params.departmentId && !this.params.id) {
-        this.department = [{
-          id: String(this.params.departmentId),
-          name: this.params.departmentName
-        }]
-        this.form.departmentIds = [this.params.departmentId]
-        this.form.departmentName = this.params.departmentName
-      }
-
       if (this.params && this.params.id) {
         this.id = this.params.id
         this.getInfo(this.params.id)
+      } else {
+        this.getWxGroups()
       }
     },
 
     methods: {
+      ...mapActions(['initOpenData', 'transCanvas']),
+
       getInfo (id) {
         this.instance.post(`/app/wxcp/wxuser/queryDetailById?id=${id}`).then(res => {
           if (res.code === 0) {
@@ -349,6 +373,47 @@
         })
       },
 
+      onUserChange (e) {
+        if (e.length) {
+          this.form.examinesName = '1'
+        } else {
+          this.form.wxGroupsName = ''
+        }
+      },
+
+      onScopeChange (e) {
+        if (e === '0') {
+          this.getWxGroups()
+        } else {
+          this.form.groupIds = []
+        }
+      },
+
+      onSelcetChange (e) {
+        if (e.length) {
+          this.form.wxGroupsName = '1'
+        } else {
+          this.form.wxGroupsName = ''
+        }
+        this.getWxGroups()
+      },
+
+      getWxGroups () {
+        this.instance.post(`/app/appmasssendingtask/queryWxGroups?sendScope=${this.form.sendScope}`, null, {
+          data: {
+            groupIds: this.form.groupIds.join(',')
+          },
+          headers: {'Content-Type': 'application/json;charset=utf-8'},
+          transformRequest: [function (data) {
+            return data.groupIds
+          }]
+        }).then(res => {
+          if (res.code === 0) {
+            this.form.wxGroups = res.data
+          }
+        })
+      },
+
       onLinkConfirm () {
         this.$refs.linkForm.validate((valid) => {
           if (valid) {
@@ -442,7 +507,9 @@
             this.fileList.push({
               ...res.data.file,
               media: res.data.media,
-              msgType: type
+              msgType: type,
+              imgPicUrl: res.data.file.url,
+              mediaId: res.data.media.mediaId
             })
 
             this.$message.success('上传成功')
@@ -460,20 +527,32 @@
         }
       },
 
-      getTags () {
-        this.instance.post(`/app/wxcp/wxtag/listAll`).then(res => {
-          if (res.code == 0) {
-            this.tagsList = res.data
-          }
-        })
-      },
-
-      confirm () {
+      confirm (sendType) {
         this.$refs.form.validate((valid) => {
           if (valid) {
-            const api = this.id ? '/app/wxcp/wxuser/update' : '/app/wxcp/wxuser/add'
-            this.instance.post(api, {
-              ...this.form
+            if (sendType === 1) {
+              return false
+            }
+
+            const contents = [
+              {
+                content: this.form.content,
+                msgType: '0'
+              },
+              ...this.fileList
+            ]
+
+            this.instance.post(`/app/appmasssendingtask/addOrUpdate`, {
+              ...this.form,
+              id: this.params.id,
+              wxGroups: this.form.wxGroups,
+              contents,
+              examines: this.form.examines.length ? this.form.examines.map(v => {
+                return {
+                  ...v,
+                  examineUserId: v.id
+                }
+              }) : []
             }).then(res => {
               if (res.code == 0) {
                 this.$message.success('提交成功')
@@ -547,6 +626,10 @@
       }
     }
 
+    * {
+      box-sizing: border-box;
+    }
+
     .add {
       display: flex;
       flex-direction: column;
@@ -625,14 +708,14 @@
         top: 0;
         width: 338px;
         height: 675px;
-        padding: 90px 15px 90px 32px;
+        padding: 80px 15px 100px 32px;
 
         .phone {
           position: absolute;
-          left: 14px;
-          top: 14px;
+          left: 13px;
+          top: 4px;
           z-index: 1;
-          width: 310px;
+          width: 314px;
           height: 647px;
         }
 
@@ -662,6 +745,12 @@
               background: #2891FF;
               border-radius: 4px;
               flex-shrink: 1;
+              overflow: hidden;
+
+              img {
+                width: 100%;
+                height: 100%;
+              }
             }
 
             .msg-item__right {
@@ -826,6 +915,68 @@
           }
         }
       }
+
+      .AppAnnounceDetail-select {
+        display: flex;
+        align-items: center;
+        min-height: 32px;
+        background: #F5F5F5;
+        border-radius: 2px;
+        border: 1px solid #D0D4DC;
+
+        & > i {
+          flex: 1;
+          height: 100%;
+          padding: 0 12px;
+          color: #888888;
+          font-size: 14px;
+          font-style: normal;
+          background: #fff;
+        }
+
+        .AppAnnounceDetail-select__input {
+          position: absolute;
+          left: 0;
+          top: 0;
+          z-index: -1;
+          opacity: 0;
+          height: 100%;
+        }
+
+        .select-right {
+          height: 100%;
+          padding: 0 12px;
+          color: #222222;
+          font-size: 12px;
+          cursor: pointer;
+          transition: all ease 0.3s;
+
+          &:hover {
+            opacity: 0.5;
+          }
+        }
+
+        .select-left {
+          display: flex;
+          flex-wrap: wrap;
+          flex: 1;
+          padding: 5px 0 5px 12px;
+          border-right: 1px solid #D0D4DC;
+          background: #fff;
+
+          span {
+            height: 22px;
+            line-height: 22px;
+            margin: 0 4px 5px 0;
+            padding: 0 8px;
+            font-size: 12px;
+            color: #222222;
+            background: #F3F4F7;
+            border-radius: 2px;
+            border: 1px solid #D0D4DC;
+          }
+        }
+      }
     }
 
     .tips {

vue.config.js

@@ -44,7 +44,7 @@ module.exports = {
   },
   devServer: {
     host: '0.0.0.0', //主机地址
-    port: 8666, //端口号
+    port: 80, //端口号
     open: true,
     // devtool: 'cheap-module-eval-source-map',
     proxy: {