素材库

packages/wxwork/AppMaterialLibrary/components/ChooseMaterial.vue

@@ -0,0 +1,212 @@
+<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
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        style="margin-top: 6px; width: 100%;"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        @selection-change="v=> ids = v.map((e) => e.id)"
+        @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
+      }
+    },
+
+    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: 'title', label: this.mpTitle },
+            { prop: 'appId', label: '小程序APPID', align: 'center' },
+            { prop: 'createUserName', label: '添加人', align: 'center' },
+            { prop: 'createTime', label: '添加时间', align: 'center' }
+          ]
+        }
+
+        if (this.currIndex === 5) {
+          return [
+            { type: 'selection' },
+            { prop: 'title', label: this.mpTitle },
+            { prop: 'pagePath', 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/list`, null, {
+          params: {
+            ...this.search,
+            type: this.currIndex
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      },
+
+      onConfirm () {
+        if (!this.ids.length) {
+          return this.$message.error('请选择素材')
+        }
+
+        if (this.ids.length > 1) {
+          return this.$message.error('素材不能多选')
+        }
+
+
+      },
+
+      open () {
+        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>