素材库

packages/wxwork/Announce/AppAnnounce/components/Add.vue

@@ -281,7 +281,7 @@
             <el-button @click="onDateForm" type="primary" :loading="isLoading2" style="width: 92px;">确认</el-button>
           </div>
         </ai-dialog>
-        <!-- <ChooseMaterial ref="ChooseMaterial" :instance="instance"></ChooseMaterial> -->
+        <ChooseMaterial ref="ChooseMaterial" :instance="instance" @change="onChooseChange"></ChooseMaterial>
       </div>
     </template>
     <template #footer>
@@ -294,7 +294,7 @@
 
 <script>
 import Phone from './Phone'
-// import ChooseMaterial from '../../../AppMaterialLibrary/components/ChooseMaterial.vue'
+import ChooseMaterial from './ChooseMaterial.vue'
 import { mapActions, mapState } from 'vuex'
 
 export default {
@@ -308,7 +308,7 @@ export default {
 
   components: {
     Phone,
-    // ChooseMaterial
+    ChooseMaterial
   },
 
   data() {
@@ -390,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) {

packages/wxwork/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>

packages/wxwork/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">

vue.config.js

@@ -57,7 +57,7 @@ module.exports = {
     proxy: {
       //设置代理,可解决跨5
       '/lan': {
-        target: 'http://192.168.1.87:9000',
+        target: 'http://192.168.1.87:39010',
         changeOrigin: true,
         pathRewrite: {
           //地址重写