宣发

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

@@ -11,13 +11,13 @@
             <template #content>
               <div class="ai-form">
                 <el-form-item label="任务名称" prop="name" style="width: 100%;" :rules="[{ required: true, message: '请输入任务名称', trigger: 'blur' }]">
-                  <el-input size="small" placeholder="请输入任务名称" v-model="form.name"></el-input>
+                  <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="gender">
+                <el-form-item label="发送范围" style="width: 100%;" prop="sendScope">
-                  <el-radio-group v-model="form.gender">
+                  <el-radio-group v-model="form.sendScope">
-                    <el-radio label="1">全部居民群</el-radio>
+                    <el-radio label="0">全部居民群</el-radio>
-                    <el-radio label="2">按部门选择</el-radio>
+                    <el-radio label="1">按部门选择</el-radio>
-                    <el-radio label="3">按网格选择</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' }]">
@@ -29,25 +29,25 @@
                   <div class="tips">
                     <p>消息预计送达居民群数：</p>
                     <span>215</span>
-                    <i class="iconfont iconModal_Warning"></i>
+                    <el-tooltip
+                      placement="top"
+                      content="任务开始后，3天内15分钟更新1次，3天后访问页面时触发更新，1时间最多刷新1次">
+                      <i class="iconfont iconModal_Warning"></i>
+                    </el-tooltip>
                   </div>
                 </el-form-item>
-                <el-form-item label="消息提醒" prop="name" style="width: 100%;" :rules="[{ required: true, message: '请输入任务名称', trigger: 'blur' }]">
-                  <el-switch
-                    v-model="form.status"
-                    active-text="开启后，创建的群发任务需要审批人进行审批">
-                  </el-switch>
-                </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>
                 <el-form-item label="发送内容" prop="departmentName" style="width: 100%;" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
                   <el-input size="small" type="textarea" :rows="6" placeholder="请输入文本内容..." v-model="form.departmentName"></el-input>
                   <div class="add">
+                    <div class="fileList" v-if="fileList.length">
+                      <div class="add-item" v-for="(item, index) in fileList" :key="index">
+                        <div class="left">
+                          <img :src="mapIcon(item.media.type)" />
+                          <span>{{ item.name }}</span>
+                        </div>
+                        <i @click="removeFile(index)">删除</i>
+                      </div>
+                    </div>
                     <el-popover
                       placement="top"
                       width="340"
@@ -58,14 +58,36 @@
                         <span style="color: #2266FF; font-size: 12px;">添加附件类型</span>
                       </div>
                       <div class="AppAnnounceDetail-content-wrapper">
-                        <div class="content-item">
+                        <el-upload
-                          <img src="https://cdn.cunwuyun.cn/dvcp/announce/big-img.png" />
+                          ref="upload"
-                          <p>图片</p>
+                          multiple
-                        </div>
+                          :file-list="fileList"
-                        <div class="content-item">
+                          :show-file-list="false"
-                          <img src="https://cdn.cunwuyun.cn/dvcp/announce/big-video.png" />
+                          :before-upload="v => handleChange(v, 10, '.jpg,.png,.jpeg')"
-                          <p>视频</p>
+                          :limit="9"
-                        </div>
+                          action="/app/wxcp/upload/uploadFile"
+                          accept=".jpg,.png,.jpeg"
+                          :http-request="v => submitUpload(v, 'image')">
+                          <div class="content-item" trigger>
+                            <img src="https://cdn.cunwuyun.cn/dvcp/announce/big-img.png" />
+                            <p>图片</p>
+                          </div>
+                        </el-upload>
+                        <el-upload
+                          ref="upload"
+                          multiple
+                          :file-list="fileList"
+                          :show-file-list="false"
+                          :before-upload="v => handleChange(v, 10, '.mp4')"
+                          :limit="9"
+                          action="/app/wxcp/upload/uploadFile"
+                          accept=".mp4"
+                          :http-request="v => submitUpload(v, 'video')">
+                          <div class="content-item" trigger>
+                            <img src="https://cdn.cunwuyun.cn/dvcp/announce/big-video.png" />
+                            <p>视频</p>
+                          </div>
+                        </el-upload>
                         <div class="content-item">
                           <img src="https://cdn.cunwuyun.cn/dvcp/announce/folder.png" />
                           <p>文件</p>
@@ -85,16 +107,38 @@
                     <em>从本地上传，图片最大支持10MB，支持JPG,PNG格式；视频最大支持10MB，支持MP4格式；文件最大支持20MB</em>
                   </div>
                 </el-form-item>
+                <el-form-item label="宣发审批" prop="enableExamine" style="width: 100%;" :rules="[{ required: true, message: '请输入任务名称', trigger: 'blur' }]">
+                  <el-switch
+                    v-model="form.enableExamine"
+                    active-value="1"
+                    inactive-value="0"
+                    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>
+                    </ai-user-get>
+                  </el-input>
+                </el-form-item>
               </div>
             </template>
           </ai-card>
         </el-form>
-        <div class="right"></div>
+        <div class="right">
+          <img class="phone" src="https://cdn.cunwuyun.cn/dvcp/announce/phone.png" />
+          <img class="phone-wrapper" src="https://cdn.cunwuyun.cn/dvcp/announce/phone-wrapper.png" />
+          <div class="right-content">
+
+          </div>
+        </div>
       </div>
     </template>
     <template #footer>
       <el-button @click="cancel">取消</el-button>
-      <el-button type="primary" @click="confirm">提交</el-button>
+      <el-button type="primary" @click="confirm" style="width: 120px;">通知成员发送</el-button>
+      <el-button type="primary" @click="confirm">定时发送</el-button>
     </template>
   </ai-detail>
 </template>
@@ -110,31 +154,20 @@
     },
 
     data () {
-      const validatorPhone = function (rule, value, callback) {
-        if (value === '') {
-          callback(new Error('请输入手机号'))
-        } else if (!/^1\d{10}$/.test(value)) {
-          callback(new Error('手机号格式错误'))
-        } else {
-          callback()
-        }
-      }
       return {
         info: {},
         department: [],
-        validatorPhone: validatorPhone,
+        fileList: [],
         form: {
-          position: '',
+          choiceTime: '',
+          contents: {},
+          enableExamine: '0',
+          examines: [],
+          wxGroups: [],
+          sendScope: '0',
+          sendType: 0,
           name: '',
-          email: '',
+          taskTitle: ''
-          telephone: '',
-          gender: '',
-          mobile: '',
-          departmentName: '',
-          departmentIds: [],
-          tagIds: [],
-          id: '',
-          status: false
         },
         id: '',
         tagsList: []
@@ -173,6 +206,64 @@
         })
       },
 
+      removeFile (index) {
+        this.fileList.splice(index, 1)
+      },
+
+      mapIcon (type) {
+        return {
+          image: 'https://cdn.cunwuyun.cn/dvcp/announce/img.png',
+          video: 'https://cdn.cunwuyun.cn/dvcp/announce/video.png',
+          folder: 'https://cdn.cunwuyun.cn/dvcp/announce/folder.png',
+          site: 'https://cdn.cunwuyun.cn/dvcp/announce/site.png',
+          miniapp: 'https://cdn.cunwuyun.cn/dvcp/announce/miniapp.png'
+        }[type]
+      },
+
+      onBeforeUpload(event) {
+        return this.onOverSize(event)
+      },
+
+      getExtension(name) {
+        return name.substring(name.lastIndexOf('.'))
+      },
+
+      handleChange (e, size, accept) {
+        const isLt10M = e.size / 1024 / 1024 < size
+        const suffixName = this.getExtension(e.name)
+        const suffixNameList = accept.split(',')
+
+        if (suffixNameList.indexOf(`${suffixName.toLowerCase()}`) === -1) {
+          this.$message.error(`不支持该格式`)
+          return false
+        }
+
+        if (!isLt10M) {
+          this.$message.error(`大小不超过${10}MB!`)
+          return false
+        }
+
+        return true
+      },
+
+      submitUpload (file, type) {
+        let formData = new FormData()
+        formData.append('file', file.file)
+        formData.append('type', type)
+        this.instance.post(`/app/wxcp/upload/uploadFile`, formData, {
+          withCredentials: false
+        }).then(res => {
+          if (res.code == 0) {
+            this.fileList.push({
+              ...res.data.file,
+              media: res.data.media
+            })
+
+            this.$message.success('上传成功')
+          }
+        })
+      },
+
       onChange (e) {
         if (e.length) {
           this.form.departmentIds = e.map(v => v.id)
@@ -304,6 +395,35 @@
           font-size: 14px;
         }
       }
+
+      .fileList {
+        margin-bottom: 12px;
+
+        .add-item {
+          justify-content: space-between;
+          margin-bottom: 8px;
+
+          .left {
+            display: flex;
+            align-items: center;
+          }
+
+          i {
+            font-size: 14px;
+            cursor: pointer;
+            font-style: normal;
+            color: red;
+
+            &:hover {
+              opacity: 0.6;
+            }
+          }
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
     }
 
     .AppAnnounceDetail-container {
@@ -321,10 +441,26 @@
       .right {
         position: sticky;
         top: 0;
-        width: 400px;
+        width: 338px;
-        height: 688px;
+        height: 675px;
-        background: url(https://cdn.cunwuyun.cn/dvcp/announce/phone.png);
+
-        background-size: 400px 100%;
+        .phone {
+          position: absolute;
+          left: 14px;
+          top: 14px;
+          z-index: 1;
+          width: 310px;
+          height: 647px;
+        }
+
+        .phone-wrapper {
+          position: absolute;
+          left: 0;
+          top: 0;
+          z-index: 2;
+          width: 338px;
+          height: 675px;
+        }
       }
     }
 
@@ -340,7 +476,7 @@
       }
 
       i {
-        color: #c0c9db;
+        color: #8899bb;
       }
 
       em {

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

@@ -12,32 +12,34 @@
         <template #left>
           <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')">创建宣发</el-button>
           <ai-select
-            v-model="search.confirmStatus"
+            v-model="search.status"
             @change="search.current = 1, getList"
             placeholder="任务状态"
-            :selectList="dict.getDict('confirmStatus')">
+            :selectList="dict.getDict('mstStatus')">
           </ai-select>
           <el-date-picker
-            v-model="search.startDate"
+            v-model="search.startTime"
             type="date"
             size="small"
+            value-format="yyyy-MM-DD"
             placeholder="选择群发开始日期">
           </el-date-picker>
           <el-date-picker
-            v-model="search.endDate"
+            v-model="search.endTime"
             type="date"
             size="small"
+            value-format="yyyy-MM-DD"
             placeholder="选择群发结束日期">
           </el-date-picker>
         </template>
         <template slot="right">
           <el-input
-            v-model="search.name"
+            v-model="search.taskTitle"
             size="small"
             v-throttle="() => { search.current = 1, getList() }"
             placeholder="请输入任务名称"
             clearable
-            @clear="search.current = 1, search.name = '', getList()"
+            @clear="search.current = 1, search.taskTitle = '', getList()"
             suffix-icon="iconfont iconSearch">
           </el-input>
         </template>
@@ -86,20 +88,21 @@ export default {
       search: {
         current: 1,
         size: 10,
-        name: '',
+        status: '',
-        startDate: '',
+        taskTitle: '',
-        endDate: ''
+        startTime: '',
+        endTime: ''
       },
       tableData: [],
       loading: false,
       total: 0,
       colConfigs: [
-        { prop: 'position', label: '任务名称' },
+        { prop: 'taskTitle', label: '任务名称' },
-        { prop: 'mobile', label: '群发类型' },
+        { prop: 'sendType', label: '群发类型', formart: v => v === '0' ? '立即发送' : '定时发送', align: 'center' },
-        { prop: 'position', label: '创建人' },
+        { prop: 'createUserId', label: '创建人', openType: 'userName', align: 'center' },
-        { prop: 'mobile', label: '群发时间' },
+        { prop: 'createTime', label: '群发时间', align: 'center' },
-        { prop: 'position', label: '状态' },
+        { prop: 'status', label: '状态', formart: v => this.dict.getLabel('mstStatus', v), align: 'center' },
-        { prop: 'mobile', label: '任务完成率' }
+        { prop: 'completionRate', label: '任务完成率', align: 'center' }
       ]
     }
   },
@@ -108,29 +111,18 @@ export default {
     ...mapState(['user'])
   },
 
-  created() {
+  created () {
-    this.getList()
+    this.dict.load('mstStatus', 'mstSendType').then(() => {
+      this.getList()
+    })
   },
 
   methods: {
-    removeDepart(id, parentid) {
-      this.$confirm('确定删除该数据？').then(() => {
-        this.instance.post(`/app/wxcp/wxdepartment/delete?id=${id}`).then(res => {
-          if (res.code == 0) {
-            this.defaultChecked = [parentid]
-            this.$message.success('删除成功！')
-            this.getTree()
-          }
-        })
-      })
-    },
-
     getList() {
       this.loading = true
-      this.instance.post(`/app/wxcp/wxuser/list`, null, {
+      this.instance.post(`/app/appmasssendingtask/list`, null, {
         params: {
           ...this.search,
-          departmentId: this.tabIndex === 0 ? this.search.departmentId : ''
         }
       }).then(res => {
         if (res.code == 0) {
@@ -151,7 +143,7 @@ export default {
 
     remove(id) {
       this.$confirm('确定删除该数据？').then(() => {
-        this.instance.post(`/app/wxcp/wxuser/delete?id=${id}`).then(res => {
+        this.instance.post(`/app/appmasssendingtask/delete?ids=${id}`).then(res => {
           if (res.code == 0) {
             this.$message.success('删除成功！')
             this.getList()