群发居民群

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;