群发居民群

2023-06-12 09:56:08 +08:00
parent e3a9f8032b
commit 56688f75d8
11 changed files with 3620 additions and 49 deletions
--- a/project/qianxinan/Announce/AppAnnounce/components/Add.vue
+++ b/project/qianxinan/Announce/AppAnnounce/components/Add.vue
@@ -17,7 +17,7 @@
                  <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 label="2">按网格选择</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="选择群主" v-if="form.sendScope !== '0'" prop="wxGroupsName" style="width: 100%;" :rules="[{ required: true, message: '请选择选择群主', trigger: 'change' }]">
@@ -131,12 +131,16 @@
                        </div>
                      </div>
                    </el-popover>
+                    <!-- <div class="add-material add-item" @click="$refs.ChooseMaterial.open()">
+                      <img src="https://cdn.cunwuyun.cn/dvcp/announce/add.png"/>
+                      <span style="color: #2266FF; font-size: 12px;">从素材库选择</span>
+                    </div> -->
                  </div>
                  <div class="tips">
                    <em>从本地上传，图片最大支持10MB，支持JPG,PNG格式；视频最大支持10MB，支持MP4格式；文件最大支持20MB</em>
                  </div>
                </el-form-item>
-                <el-form-item label="结束时间" v-if="params.sendChannel === '1'" style="width: 100%;" prop="taskEndTime" :rules="[{ required: true, message: '请选择结束时间', trigger: 'change' }]">
+                <el-form-item label="结束时间" style="width: 100%;" prop="taskEndTime" :rules="[{ required: true, message: '请选择结束时间', trigger: 'change' }]">
                  <el-date-picker
                    style="width: 100%;"
                    v-model="form.taskEndTime"
@@ -184,29 +188,29 @@
            <div class="ai-form">
              <el-form-item label="标题" style="width: 100%;" prop="linkTitle" :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]">
                <el-input
-                    size="small"
-                    placeholder="请输入标题"
-                    maxlength="42"
-                    show-word-limit
-                    v-model="linkForm.linkTitle">
+                  size="small"
+                  placeholder="请输入标题"
+                  maxlength="42"
+                  show-word-limit
+                  v-model="linkForm.linkTitle">
                </el-input>
              </el-form-item>
              <el-form-item label="链接" style="width: 100%;" prop="linkUrl" :rules="[{ required: true, message: '请输入链接', trigger: 'blur' }]">
                <el-input
-                    size="small"
-                    placeholder="请输入链接"
-                    maxlength="682"
-                    show-word-limit
-                    v-model="linkForm.linkUrl">
+                  size="small"
+                  placeholder="请输入链接"
+                  maxlength="682"
+                  show-word-limit
+                  v-model="linkForm.linkUrl">
                </el-input>
              </el-form-item>
              <el-form-item label="描述" style="width: 100%;" prop="linkDesc">
                <el-input
-                    size="small"
-                    placeholder="请输入描述"
-                    maxlength="170"
-                    show-word-limit
-                    v-model="linkForm.linkDesc">
+                  size="small"
+                  placeholder="请输入描述"
+                  maxlength="170"
+                  show-word-limit
+                  v-model="linkForm.linkDesc">
                </el-input>
              </el-form-item>
              <el-form-item label="封面图" prop="linkPicUrl" style="width: 100%;">
@@ -216,34 +220,34 @@
          </el-form>
        </ai-dialog>
        <ai-dialog
-            :visible.sync="isShowAddMiniapp"
-            width="920px"
-            title="小程序消息"
-            @close="onClose"
-            @onConfirm="onMiniAppForm">
+          :visible.sync="isShowAddMiniapp"
+          width="920px"
+          title="小程序消息"
+          @close="onClose"
+          @onConfirm="onMiniAppForm">
          <el-form ref="miniAppForm" :model="miniAppForm" label-width="130px" label-position="right">
            <div class="ai-form">
              <el-form-item label="小程序appid" style="width: 100%;" prop="mpAppid" :rules="[{ required: true, message: '小程序appid', trigger: 'blur' }]">
                <el-input
-                    size="small"
-                    placeholder="小程序appid"
-                    v-model="miniAppForm.mpAppid">
+                  size="small"
+                  placeholder="小程序appid"
+                  v-model="miniAppForm.mpAppid">
                </el-input>
              </el-form-item>
              <el-form-item label="小程序page路径" style="width: 100%;" prop="mpPage" :rules="[{ required: true, message: '请输入小程序page路径', trigger: 'blur' }]">
                <el-input
-                    size="small"
-                    placeholder="请输入小程序page路径"
-                    v-model="miniAppForm.mpPage">
+                  size="small"
+                  placeholder="请输入小程序page路径"
+                  v-model="miniAppForm.mpPage">
                </el-input>
              </el-form-item>
              <el-form-item label="标题" style="width: 100%;" prop="mpTitle" :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]">
                <el-input
-                    size="small"
-                    placeholder="请输入标题"
-                    maxlength="20"
-                    show-word-limit
-                    v-model="miniAppForm.mpTitle">
+                  size="small"
+                  placeholder="请输入标题"
+                  maxlength="20"
+                  show-word-limit
+                  v-model="miniAppForm.mpTitle">
                </el-input>
              </el-form-item>
              <el-form-item label="封面图" prop="media" style="width: 100%;" :rules="[{ required: true, message: '请上传封面图', trigger: 'change' }]">
@@ -277,6 +281,7 @@
            <el-button @click="onDateForm" type="primary" :loading="isLoading2" style="width: 92px;">确认</el-button>
          </div>
        </ai-dialog>
+        <ChooseMaterial ref="ChooseMaterial" :instance="instance" @change="onChooseChange"></ChooseMaterial>
      </div>
    </template>
    <template #footer>
@@ -289,7 +294,8 @@

 <script>
 import Phone from './Phone'
-import {mapActions, mapState} from 'vuex'
+import ChooseMaterial from './ChooseMaterial.vue'
+import { mapActions, mapState } from 'vuex'

 export default {
  name: 'Add',
@@ -301,13 +307,15 @@ export default {
  },

  components: {
-    Phone
+    Phone,
+    ChooseMaterial
  },

  data() {
    return {
      info: {},
      department: [],
+      isShowChoose: false,
      isLoading1: false,
      isLoading2: false,
      fileList: [],
@@ -382,6 +390,12 @@ export default {
  methods: {
    ...mapActions(['initOpenData', 'transCanvas']),

+    onChooseChange (e) {
+      this.form.content = e.filter(v => v.msgType === '0').map(v => v.content).join(' ')
+
+      this.fileList = this.fileList.concat(e.filter(v => v.msgType !== '0'))
+    },
+
    getInfo(id) {
      this.instance.post(`/app/appmasssendingtask/queryDetailById?id=${id}`).then(res => {
        if (res.code === 0) {
@@ -747,6 +761,7 @@ export default {

  .add {
    display: flex;
+    position: relative;
    flex-direction: column;
    padding: 14px 16px;
    background: #F9F9F9;
@@ -754,6 +769,13 @@ export default {
    border: 1px solid #D0D4DC;
    border-top: none;

+    .add-material {
+      position: absolute;
+      bottom: 14px;
+      left: 16px;
+      transform: translateX(120%);
+    }
+
    .add-item {
      display: flex;
      align-items: center;
--- a/project/qianxinan/Announce/AppAnnounce/components/ChooseMaterial.vue
+++ b/project/qianxinan/Announce/AppAnnounce/components/ChooseMaterial.vue
@@ -0,0 +1,221 @@
+<template>
+  <div id="ChooseMaterial">
+    <ai-dialog
+      :visible.sync="isShow"
+      width="890px"
+      @onConfirm="onConfirm"
+      title="选择素材">
+      <div class="AppMaterialLibrary-title">
+        <span
+          v-for="(item, index) in typeList"
+          :key="index"
+          :class="[currIndex === index ? 'active' : '']" @click="currIndex = index, search.current = 1, getList()">
+          {{ item }}
+        </span>
+      </div>
+      <ai-search-bar class="search-bar">
+        <template #left>
+        </template>
+        <template slot="right">
+          <el-input
+            v-model="search.title"
+            size="small"
+            v-throttle="() => { search.current = 1, getList() }"
+            placeholder="请输入标题、话术内容、添加人"
+            clearable
+            @clear="search.current = 1, search.title = '', getList()"
+            suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-table
+        v-if="isShow"
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        style="margin-top: 6px; width: 100%;"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        @selection-change="onSelectChange"
+        @getList="getList">
+      </ai-table>
+    </ai-dialog>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'ChooseMaterial',
+
+    props: {
+      instance: Function
+    },
+
+    data() {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          title: '',
+        },
+        ids: [],
+        isShow: false,
+        id: '',
+        typeList: ['话术', '图片', '小程序', '文件', '视频', '网页'],
+        currIndex: 0,
+        tableData: [],
+        total: 0,
+        value: []
+      }
+    },
+
+    computed: {
+      mpTitle () {
+        return {
+          '0': '话术标题',
+          '1': '图片名称',
+          '2': '小程序标题',
+          '3': '文件名称',
+          '4': '视频名称',
+          '5': '网页名称'
+        }[this.currIndex]
+      },
+
+      colConfigs () {
+        if (this.currIndex === 0) {
+          return [
+            { type: 'selection' },
+            { prop: 'title', label: this.mpTitle },
+            { prop: 'content', label: '话术内容', align: 'center' },
+            { prop: 'createUserName', label: '添加人', align: 'center' },
+            { prop: 'createTime', label: '添加时间', align: 'center' }
+          ]
+        }
+
+        if (this.currIndex === 2) {
+          return [
+            { type: 'selection' },
+            { prop: 'mpTitle', label: this.mpTitle },
+            { prop: 'mpAppid', label: '小程序APPID', align: 'center' },
+            { prop: 'createUserName', label: '添加人', align: 'center' },
+            { prop: 'createTime', label: '添加时间', align: 'center' }
+          ]
+        }
+
+        if (this.currIndex === 5) {
+          return [
+            { type: 'selection' },
+            { prop: 'linkTitle', label: this.mpTitle },
+            { prop: 'linkUrl', label: '外链网页', align: 'center' },
+            { prop: 'createUserName', label: '添加人', align: 'center' },
+            { prop: 'createTime', label: '添加时间', align: 'center' }
+          ]
+        }
+
+        return [
+          { type: 'selection' },
+          { prop: 'title', label: this.mpTitle },
+          { prop: 'fileSizeStr', label: '文件大小', align: 'center' },
+          { prop: 'createUserName', label: '添加人', align: 'center' },
+          { prop: 'createTime', label: '添加时间', align: 'center' }
+        ]
+      }
+    },
+
+    created () {
+      this.getList()
+    },
+
+    methods: {
+      getList() {
+        this.instance.post(`/app/appmaterialinfo/listByMST`, null, {
+          params: {
+            ...this.search,
+            mstType: 0,
+            type: this.currIndex
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      },
+
+      onSelectChange (e) {
+        this.value = e
+      },
+
+      onConfirm () {
+        if (!this.value.length) {
+          return this.$message.error('请选择素材')
+        }
+
+        if (this.value.length > 9) {
+          return this.$message.error('素材不能超过9个')
+        }
+
+        this.$emit('change', this.value)
+        this.isShow = false
+      },
+
+      open () {
+        this.value = []
+        this.isShow = true
+      },
+
+      close () {
+        this.isShow = false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  #ChooseMaterial {
+    :deep( .ai-list__content--right-wrapper ) {
+      padding: 0 20px!important;
+    }
+
+    :deep( .el-dialog__header ) {
+      display: none;
+    }
+
+    :deep( .el-dialog__body ) {
+      padding-top: 0!important;
+    }
+
+    .AppMaterialLibrary-title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+      border-bottom: 1px solid #eee;
+
+      span {
+        height: 100%;
+        line-height: 56px;
+        margin-right: 32px;
+        color: #888888;
+        font-size: 16px;
+        font-weight: 600;
+        transition: all ease 0.3s;
+        border-bottom: 3px solid transparent;
+        cursor: pointer;
+        user-select: none;
+
+        &:hover {
+          color: #222;
+        }
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        &.active {
+          color: #222222;
+          border-bottom: 3px solid #2266FF;
+        }
+      }
+    }
+  }
+</style>
--- a/project/qianxinan/Announce/AppAnnounce/components/Detail.vue
+++ b/project/qianxinan/Announce/AppAnnounce/components/Detail.vue
@@ -230,6 +230,7 @@
        :visible.sync="isShowGroups"
        width="890px"
        title="群发范围"
+        customFooter
        @onConfirm="isShowGroups = false">
        <ai-table
          :tableData="info.wxGroups"
@@ -239,6 +240,9 @@
          :isShowPagination="false"
          @getList="() => {}">
        </ai-table>
+        <div class="dialog-footer" slot="footer">
+          <el-button @click="isShowGroups = false">关闭</el-button>
+        </div>
      </ai-dialog>
      <div class="detail-phone" v-if="isShowPhone">
        <div class="mask"></div>
--- a/project/qianxinan/Announce/AppAnnounce/components/List.vue
+++ b/project/qianxinan/Announce/AppAnnounce/components/List.vue
@@ -10,7 +10,7 @@
    <template slot="content">
      <ai-search-bar class="search-bar">
        <template #left>
-          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd(0, '')">创建宣发</el-button>
+          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')">创建宣发</el-button>
          <ai-select
            v-model="search.status"
            @change="search.current = 1, getList()"
@@ -83,7 +83,7 @@
          </template>
        </el-table-column>
      </ai-table>
-      <div class="dialog" v-if="isShow">
+      <!-- <div class="dialog" v-if="isShow">
        <div class="mask"></div>
        <div class="dialog-wrapper">
          <img src="https://cdn.cunwuyun.cn/dvcp/announce/close1.png" @click="isShow = false" />
@@ -103,7 +103,7 @@
          </div>
          <el-button style="width: 106px;" size="small" type="primary" icon="iconfont" @click="isShow = false, toAdd(currIndex, '')">去创建</el-button>
        </div>
-      </div>
+      </div> -->
    </template>
  </ai-list>
 </template>
@@ -128,7 +128,7 @@
          startTime: '',
          endTime: ''
        },
-        currIndex: '0',
+        currIndex: '1',
        name: '',
        isShow: false,
        user: [],
@@ -140,6 +140,7 @@
          { prop: 'typeName', label: '群发类型', align: 'center' },
          { slot: 'user', label: '创建人', openType: 'userName', align: 'center' },
          { prop: 'choiceTime', label: '群发时间', align: 'center' },
+          { prop: 'taskEndTime', label: '群发结束时间', align: 'center' },
          {
            prop: 'status',
            align: 'center',
@@ -248,12 +249,12 @@
        })
      },

-      toAdd(type, id) {
+      toAdd(id) {
        this.$emit('change', {
          type: 'Add',
          params: {
-            id,
-            sendChannel: type
+            id: id || '',
+            sendChannel: 0
          }
        })
      },
@@ -329,12 +330,14 @@
        }

        .dialog-list {
-          display: flex;
-          justify-content: space-between;
+          // display: flex;
+          // justify-content: space-between;
          margin-bottom: 40px;

          & > div {
-            flex: 1;
+            // flex: 1;
+            width: 216px;
+            margin-left: 120px;
            height: 280px;
            padding: 24px;
            background: #FFFFFF;
--- a/project/qianxinan/Announce/AppAnnounce/components/Phone.vue
+++ b/project/qianxinan/Announce/AppAnnounce/components/Phone.vue
@@ -24,14 +24,14 @@
              <img :src="item.imgPicUrl" />
            </div>
            <div class="msg-wrapper msg-video" v-if="item.msgType === '2'">
-              <video controls :src="item.url"></video>
+              <video controls :src="item.url || item.fileUrl"></video>
            </div>
            <div class="msg-wrapper msg-file" v-if="item.msgType === '3'">
              <div class="msg-left">
-                <h2>{{ item.name }}</h2>
+                <h2>{{ item.name || item.title }}</h2>
                <p>{{ item.fileSizeStr }}</p>
              </div>
-              <img :src="mapIcon(item.name)" />
+              <img :src="mapIcon(item.name || item.fileUrl)" />
            </div>
            <div class="msg-wrapper msg-link" v-if="item.msgType === '4'">
              <h2>{{ item.linkTitle }}</h2>
@@ -42,7 +42,7 @@
            </div>
            <div class="msg-wrapper msg-miniapp" v-if="item.msgType === '5'">
              <h2>{{ item.mpTitle }}</h2>
-              <img :src="item.url" />
+              <img :src="item.url || item.pictureUrl" />
              <div class="msg-bottom">
                <i>小程序</i>
                <img src="https://cdn.cunwuyun.cn/dvcp/announce/miniapp.png">