素材库

packages/wxwork/AnnounceWeChat/AppAnnounceWeChat/components/Add.vue

@@ -122,6 +122,10 @@
                         </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>
@@ -252,6 +256,7 @@
             </div>
           </div>
         </ai-dialog>
+        <ChooseMaterial ref="ChooseMaterial" :instance="instance" @change="onChooseChange"></ChooseMaterial>
       </div>
     </template>
     <template #footer>
@@ -264,6 +269,7 @@
 
 <script>
 import Phone from './Phone'
+import ChooseMaterial from './ChooseMaterial.vue'
 import {mapActions, mapState} from 'vuex'
 
 export default {
@@ -276,7 +282,8 @@ export default {
   },
 
   components: {
-    Phone
+    Phone,
+    ChooseMaterial
   },
 
   data() {
@@ -355,6 +362,12 @@ export default {
   methods: {
     ...mapActions(['initOpenData', 'transCanvas']),
 
+    onChooseChange (e) {
+      this.form.content = e.filter(v => v.msgType === '0').map(v => v.content).join(' ') || this.form.content
+
+      this.fileList = this.fileList.concat(e.filter(v => v.msgType !== '0'))
+    },
+
     choose (e) {
       const index = this.chooseTags.map(v => v.id).indexOf(e.id)
       if (index === -1) {
@@ -780,6 +793,7 @@ export default {
 
   .add {
     display: flex;
+    position: relative;
     flex-direction: column;
     padding: 14px 16px;
     background: #F9F9F9;
@@ -787,6 +801,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;