素材库

2023-03-07 17:09:08 +08:00
parent 87a038b0ed
commit 8aa991ae07
7 changed files with 488 additions and 16 deletions
--- a/packages/wxwork/AnnounceResident/AppAnnounceResident/components/Add.vue
+++ b/packages/wxwork/AnnounceResident/AppAnnounceResident/components/Add.vue
@@ -176,6 +176,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>
@@ -364,6 +368,7 @@
            </div>
          </div>
        </ai-dialog>
+        <ChooseMaterial ref="ChooseMaterial" :instance="instance" @change="onChooseChange"></ChooseMaterial>
      </div>
    </template>
    <template #footer>
@@ -376,6 +381,7 @@

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

 export default {
@@ -388,7 +394,8 @@ export default {
  },

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

  data() {
@@ -482,6 +489,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(id) {
      const index = this.chooseTags.indexOf(id)
      if (index === -1) {
@@ -942,6 +955,7 @@ export default {

  .add {
    display: flex;
+    position: relative;
    flex-direction: column;
    padding: 14px 16px;
    background: #F9F9F9;
@@ -949,6 +963,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/packages/wxwork/AnnounceResident/AppAnnounceResident/components/ChooseMaterial.vue
+++ b/packages/wxwork/AnnounceResident/AppAnnounceResident/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: 2,
+            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/packages/wxwork/AnnounceResident/AppAnnounceResident/components/Phone.vue
+++ b/packages/wxwork/AnnounceResident/AppAnnounceResident/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">
--- a/packages/wxwork/AnnounceWeChat/AppAnnounceWeChat/components/Add.vue
+++ b/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;
--- a/packages/wxwork/AnnounceWeChat/AppAnnounceWeChat/components/ChooseMaterial.vue
+++ b/packages/wxwork/AnnounceWeChat/AppAnnounceWeChat/components/ChooseMaterial.vue
@@ -0,0 +1,209 @@
+<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': '网页名称'
+        }[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 === 3) {
+          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: 1,
+            type: this.currIndex > 1 ? this.currIndex + 2 : 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/packages/wxwork/AnnounceWeChat/AppAnnounceWeChat/components/Phone.vue
+++ b/packages/wxwork/AnnounceWeChat/AppAnnounceWeChat/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">
--- a/packages/wxwork/AppMaterialLibrary/components/List.vue
+++ b/packages/wxwork/AppMaterialLibrary/components/List.vue
@@ -87,7 +87,7 @@
              </el-input>
            </el-form-item>
            <el-form-item v-if="currIndex === 1" label="上传图片" style="width: 100%;" prop="fileUrl" :rules="[{ required: true, message: '请上传', trigger: 'change' }]">
-              <ai-uploader :instance="instance" url="/admin/file/add2" v-model="form.fileUrl" :limit="1"></ai-uploader>
+              <ai-uploader :instance="instance" url="/admin/file/add3?type=image" v-model="form.fileUrl" :limit="1"></ai-uploader>
            </el-form-item>
            <el-form-item v-if="currIndex === 3" label="文件名称" style="width: 100%;" prop="title" :rules="[{ required: true, message: '请输入文件名称', trigger: 'blur' }]">
              <el-input
@@ -99,7 +99,7 @@
              </el-input>
            </el-form-item>
            <el-form-item v-if="currIndex === 3" label="上传文件" style="width: 100%;" prop="fileUrl" :rules="[{ required: true, message: '请上传', trigger: 'change' }]">
-              <ai-uploader fileType="file" url="/admin/file/add2" :instance="instance" v-model="form.fileUrl" :limit="1"></ai-uploader>
+              <ai-uploader fileType="file" url="/admin/file/add3?type=file" :instance="instance" v-model="form.fileUrl" :limit="1"></ai-uploader>
            </el-form-item>
            <el-form-item v-if="currIndex === 4" label="视频标题" style="width: 100%;" prop="title" :rules="[{ required: true, message: '请输入视频标题', trigger: 'blur' }]">
              <el-input
@@ -111,10 +111,10 @@
              </el-input>
            </el-form-item>
            <el-form-item v-if="currIndex === 4" label="上传视频" style="width: 100%;" prop="fileUrl" :rules="[{ required: true, message: '请上传', trigger: 'change' }]">
-              <ai-uploader :instance="instance" url="/admin/file/add2" fileType="file" v-model="form.fileUrl" :limit="1"></ai-uploader>
+              <ai-uploader :instance="instance" url="/admin/file/add3?type=video" fileType="file" v-model="form.fileUrl" :limit="1"></ai-uploader>
            </el-form-item>
            <el-form-item v-if="currIndex === 4" label="视频封面图" prop="pictureUrl" style="width: 100%;" :rules="[{ required: true, message: '请上传视频封面图', trigger: 'change' }]">
-              <ai-uploader :instance="instance" v-model="form.pictureUrl" :limit="1"></ai-uploader>
+              <ai-uploader :instance="instance" url="/admin/file/add3?type=image" v-model="form.pictureUrl" :limit="1"></ai-uploader>
            </el-form-item>
            <el-form-item v-if="currIndex === 4" label="视频描述" style="width: 100%;" prop="content" :rules="[{ required: true, message: '请输入视频描述', trigger: 'blur' }]">
              <el-input
@@ -153,7 +153,7 @@
              </el-input>
            </el-form-item>
            <el-form-item v-if="currIndex === 5" label="网页封面图" prop="pictureUrl" style="width: 100%;" :rules="[{ required: true, message: '请上传封面图', trigger: 'change' }]">
-              <ai-uploader :instance="instance" v-model="form.pictureUrl" :limit="1"></ai-uploader>
+              <ai-uploader :instance="instance" url="/admin/file/add3?type=image" v-model="form.pictureUrl" :limit="1"></ai-uploader>
            </el-form-item>
            <el-form-item v-if="currIndex === 2" label="小程序标题" style="width: 100%;" prop="title" :rules="[{ required: true, message: '请输入小程序标题', trigger: 'blur' }]">
              <el-input
@@ -179,7 +179,7 @@
              </el-input>
            </el-form-item>
            <el-form-item v-if="currIndex === 2" label="小程序封面图" prop="pictureUrl" style="width: 100%;" :rules="[{ required: true, message: '请上传封面图', trigger: 'change' }]">
-              <ai-uploader :instance="instance" v-model="form.pictureUrl" :limit="1"></ai-uploader>
+              <ai-uploader :instance="instance" url="/admin/file/add3?type=image" v-model="form.pictureUrl" :limit="1"></ai-uploader>
            </el-form-item>
          </div>
        </el-form>