电子站牌项目

1、添加resource-gallery通用组件，整合图片和视频的上传选取等功能，定义在core/support下 2、添加自定义插件bsth-slide轮播组件，可以轮播图片和视频，现阶段完成了初步功能和自定义属性编辑器 bsth-slide__editor

电子站牌项目
1、添加resource-gallery通用组件，整合图片和视频的上传选取等功能，定义在core/support下 2、添加自定义插件bsth-slide轮播组件，可以轮播图片和视频，现阶段完成了初步功能和自定义属性编辑器 bsth-slide__editor
徐烜
1 parent 6c06084a
Showing 11 changed files with 694 additions and 0 deletions
front-end/h5/package.json
front-end/h5/src/components/core/plugins/bsth-slide__editor.js
front-end/h5/src/components/core/plugins/bsth/bsth-slide.js
front-end/h5/src/components/core/plugins/index.js
front-end/h5/src/components/core/support/index.js
front-end/h5/src/components/core/support/resource-gallery/components/galleryValue.js
front-end/h5/src/components/core/support/resource-gallery/components/uploader.js
front-end/h5/src/components/core/support/resource-gallery/gallery.js
front-end/h5/src/components/core/support/resource-gallery/gallery.scss
front-end/h5/src/components/core/support/resource-gallery/tabs/personalImage.js
front-end/h5/src/components/core/support/resource-gallery/tabs/personalVideo.js
@@ -42,6 +42,7 @@
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1",
+    "vue-video-player": "^5.0.2",
     "x-data-spreadsheet": "^1.1.4"
   },
   "devDependencies": {
+/**
+ * 对应bsth-slide组件的属性中设置
+ *    editor: {
+ *       custom: true
+ *    }
+ */
+
+import { GalleryValue, GalleryValueType } from 'core/support/resource-gallery/components/galleryValue'
+
+export default {
+  props: {
+    elementProps: {
+      type: Object,
+      default: () => ({
+        items: [], // 对应bsth-slide组件的items属性
+        activeIndex: 0 // 对应bsth-slide组件的activeIndex属性
+      })
+    }
+  },
+  computed: {
+    innerItems () {
+      return this.elementProps.items
+    }
+  },
+  data () {
+    return {
+      current: 1 // 下标从1开始
+    }
+  },
+  methods: {
+    p_change (page) { // 分页条change事件处理器
+      this.current = page
+      this.elementProps.activeIndex = page - 1
+    },
+    g_change (item) { // gallery change事件处理器, item 是 GalleryValue 类型
+      const currentItem = this.innerItems[this.current - 1]
+      let itemObj = item.toObject()
+      currentItem.url = itemObj.url
+      currentItem.flag = itemObj.flag
+    },
+    itemRender (current, type, originalElement) {
+      if (type === 'prev') { // 上一页
+        return <a-button style={{ marginRight: '8px' }} size="small" icon="minus"
+                         onClick={() => this.minus(current)}
+                         disabled={this.innerItems.length === 1}></a-button>
+      } else if (type === 'next') { // 下一页
+        return <a-button style={{ marginLeft: '8px' }} size="small" icon="plus"
+                         onClick={this.add}></a-button>
+      }
+      return originalElement
+    },
+    minus (index) { // index 下标从0开始
+      if (this.innerItems.length === 1) { // 只有一个元素，不能再移除
+        return
+      }
+      this.elementProps.items.splice(index, 1)
+      this.elementProps.activeIndex = Math.max(index - 1, 0)
+      this.current = Math.max(index - 1, 0) + 1
+    },
+    add () {
+      this.elementProps.items.push(new GalleryValue({ url: '', type: GalleryValueType.IMAGE }).toObject())
+      this.current = this.elementProps.items.length
+      this.elementProps.activeIndex = this.current - 1
+    }
+  },
+  render () {
+    const currentItem = GalleryValue.toGalleryValue(this.innerItems[this.current - 1])
+    // console.log(currentItem)
+    return (
+      <div>
+        <a-pagination
+          current={this.current}
+          onChange={this.p_change}
+          size="small"
+          total={this.innerItems.length}
+          defaultPageSize={1}
+          itemRender={this.itemRender}
+        />
+        <bsth-resource-gallery
+          style={{ margin: '16px 0' }}
+          value={currentItem}
+          onChange={this.g_change}
+        />
+      </div>
+    )
+  }
+}
+/**
+ * 自定义轮播组件（可以轮播视频）。
+ */
+
+import PropTypes from '@luban-h5/plugin-common-props'
+import { Swipe, SwipeItem } from 'vant'
+import 'vant/lib/swipe/style'
+import 'vant/lib/swipe-item/style'
+import { VideoPlayer } from 'vue-video-player'
+import 'video.js/dist/video-js.css'
+
+import { GalleryValue, GalleryValueType } from 'core/support/resource-gallery/components/galleryValue'
+
+function getDefaultItems () {
+  const defaultItems = [ // TODO：目前鲁班的后端渲染引擎处理不了组件属性的自定义类型，所以自定义转换成普通对象
+    new GalleryValue({ type: GalleryValueType.IMAGE, url: 'https://img.yzcdn.cn/vant/apple-1.jpg' }).toObject(),
+    new GalleryValue({ type: GalleryValueType.IMAGE, url: 'https://img.yzcdn.cn/vant/apple-2.jpg' }).toObject()
+  ]
+  return defaultItems
+}
+
+export default {
+  extra: {
+    defaultStyle: { // 默认属性
+      top: 0,
+      left: 0,
+      width: 350,
+      height: 300
+    }
+  },
+  name: 'bsth-slide',
+  data () {
+    return {}
+  },
+  props: {
+    editorMode: PropTypes.string({ // 编辑模式会由编辑器自动注入（值：edit, preview）
+      defaultValue: 'preview',
+      label: '模式',
+      visible: false
+    }),
+    // -------------- 调用定制editor的属性 -------------//
+    items: { // 每个轮播项的内容
+      type: Array,
+      default: () => getDefaultItems(),
+      editor: {
+        custom: true
+      }
+    },
+    activeIndex: { // 当前轮播项目的index（对应items数组下标）
+      type: Number,
+      default: 0,
+      editor: {
+        custom: true
+      }
+    },
+    // -------------- 数据属性 ------------- //
+    interval: PropTypes.number({ label: '间隔时间', defaultValue: 4000 })
+  },
+  render () {
+    const { items, activeIndex } = this
+    if (this.editorMode === 'edit') { // 如果是编辑状态显示item中的activeIndex下标项
+      if (items.length > 0) {
+        return (<div><p>{items[activeIndex].url}</p></div>)
+      } else {
+        return (<div><p>无轮播项目</p></div>)
+      }
+    } else {
+      return (
+        <Swipe autoplay={+this.interval} indicator-color="red">
+          {
+            items.map(item => (
+              <SwipeItem><p>{item.url}</p></SwipeItem>
+            ))
+          }
+        </Swipe>
+      )
+    }
+  },
+  mounted () {},
+  destroyed () {},
+  watch: {},
+  methods: {}
+}
@@ -21,6 +21,7 @@ import LbpNewsList from &#39;core/plugins/lbp-news-list&#39;
  
 import BsthLineChart from 'core/plugins/bsth/bsth-line-chart'
 import BsthLineChartList from 'core/plugins/bsth/bsth-line-chart-list'
+import BsthSlide from 'core/plugins/bsth/bsth-slide'
  
 export const pluginsList = [
   {
@@ -330,6 +331,19 @@ export const pluginsList = [
     component: BsthLineChartList,
     visible: true,
     name: BsthLineChartList.name
+  },
+
+  {
+    i18nTitle: {
+      'en-US': 'Carousel2',
+      'zh-CN': '轮播图2'
+    },
+    title: '轮播图2',
+    icon: 'photo',
+    component: BsthSlide,
+    visible: true,
+    name: BsthSlide.name
+    // disabled: true
   }
 ]
  
@@ -16,6 +16,7 @@ import Vue from &#39;vue&#39;
 import PropMultiTextItemsEditor from './prop-multi-items-editor/text.js'
 import ImageGallery from './image-gallery/gallery.js'
 import VideoGallery from './video-gallery/gallery.js'
+import ResourceGallery from './resource-gallery/gallery.js'
 import LbsExcelEditor from './excel'
 import ColorsPanel from './colors-panel'
 import LbpTextAlign from '@luban-h5/lbs-text-align'
@@ -31,6 +32,7 @@ Vue.component(ColorPicker.name, ColorPicker)
 Vue.component(PropMultiTextItemsEditor.name, PropMultiTextItemsEditor)
 Vue.component(ImageGallery.name, ImageGallery)
 Vue.component(VideoGallery.name, VideoGallery)
+Vue.component(ResourceGallery.name, ResourceGallery)
 Vue.component(LbpTextAlign.name, LbpTextAlign)
 Vue.component(LbsExcelEditor.name, LbsExcelEditor)
 Vue.component(ColorsPanel.name, ColorsPanel)
+/**
+ * bsth-resource-gallery 的属性value 对应的类型
+ */
+
+const IMAGE = 1 // 图片
+const VIDEO = 2 // 视频
+
+const GalleryValueType = Object.freeze({
+  IMAGE: Symbol(IMAGE),
+  VIDEO: Symbol(VIDEO)
+})
+
+class GalleryValue {
+  constructor (value = {}) {
+    /** 类型 使用 GalleryValueType */
+    this.type = value.type
+    /** 资源获取路径 */
+    this.url = value.url
+
+    // TODO：其他属性再议
+  }
+
+  toObject () { // 转换成一般对象形式，和静态方法 toGalleryValue 参数对应
+    switch (this.type) {
+      case GalleryValueType.IMAGE:
+        return { url: this.url, flag: IMAGE }
+      case GalleryValueType.VIDEO:
+        return { url: this.url, flag: VIDEO }
+      default:
+        throw new Error(`未知的GalleryValue类型:${this.type}`)
+    }
+  }
+
+  /**
+   * 转换成GalleryValue对象
+   * @param url
+   * @param flag
+   */
+  static toGalleryValue ({ url, flag }) {
+    if (GalleryValueType.IMAGE.toString() === 'Symbol(' + flag + ')') {
+      return new GalleryValue({ url: url, type: GalleryValueType.IMAGE })
+    } else if (GalleryValueType.VIDEO.toString() === 'Symbol(' + flag + ')') {
+      return new GalleryValue({ url: url, type: GalleryValueType.VIDEO })
+    } else {
+      throw new Error(`错误的GalleryValue类型Flag:${flag}`)
+    }
+  }
+}
+
+export {
+  GalleryValueType,
+  GalleryValue
+}
+/**
+ * 上传文件组件。
+ */
+export default {
+  props: {
+    uploadSuccess: {
+      type: Function,
+      default: () => {}
+    },
+    beforeUpload: {
+      type: Function,
+      default: (file) => file
+    }
+  },
+  data () {
+    return {
+      loading: false
+    }
+  },
+  methods: {
+    handleBeforeUpload (file) {
+      return this.beforeUpload(file)
+    },
+    handleChange (info) {
+      this.loading = true
+      const status = info.file.status
+      if (status !== 'uploading') {
+        this.loading = true
+        const status = info.file.status
+        if (status !== 'uploading') {
+          console.log(info.file, info.fileList)
+        }
+        if (status === 'done') {
+          this.loading = false
+          this.uploadSuccess(info)
+          this.$message.success(`${info.file.name} 文件上传成功.`)
+        } else if (status === 'error') {
+          this.$message.error(`${info.file.name} 文件上传失败.`)
+        }
+      }
+    }
+  },
+  render (h) {
+    return (
+      <a-upload
+        name="files"
+        action="/upload"
+        beforeUpload={this.handleBeforeUpload}
+        onChange={this.handleChange}>
+        <slot>
+          <a-button>
+            <a-icon type="upload"/>点击上传
+          </a-button>
+        </slot>
+      </a-upload>
+    )
+  }
+}
+/**
+ * 资源库组件（整合图片和视频资源）
+ * 整合lbs-image-gallery和lbs-video-gallery
+ */
+
+import { GalleryValue, GalleryValueType } from 'core/support/resource-gallery/components/galleryValue'
+import PersonalImage from './tabs/personalImage.js'
+import PersonalVideo from './tabs/personalVideo.js'
+
+export default {
+  name: 'bsth-resource-gallery',
+  props: {
+    visible: { // 是否可见
+      type: Boolean,
+      default: false
+    },
+    value: { // 对应的值
+      type: GalleryValue
+    }
+  },
+  data () {
+    return {
+      tabs: [
+        {
+          value: 'personalImage',
+          label: '我的图片库'
+        },
+        {
+          value: 'personalVideo',
+          label: '我的视频库'
+        }
+      ],
+      activeTab: 'personalImage',
+      innerVisible: false // 对应visible属性
+    }
+  },
+  watch: {
+    visible (value) {
+      this.innerVisible = value
+    }
+  },
+  methods: {
+    showGallery () {
+      this.innerVisible = true
+    },
+    handleClose () {
+      this.innerVisible = false
+    },
+    changeTab ({ key }) {
+      this.activeTab = key
+    },
+    handleSelect (item) { // item是GalleryValue类型
+      this.handleClose()
+      this.$emit('change', item)
+    },
+    renderContent () {
+      switch (this.activeTab) {
+        case 'personalImage' :
+          return <PersonalImage onChangeItem={item => {
+            this.handleSelect(item)
+          }}/>
+        case 'personalVideo' :
+          return <PersonalVideo onChangeItem={item => {
+            this.handleSelect(item)
+          }}/>
+      }
+    },
+    renderDefaultActivator () {
+      const activatorWithout = (
+        <div
+          class="default-activator cursor-pointer empty-bg-activator"
+          onClick={this.showGallery}
+        >
+          <a-icon type="plus" />
+        </div>
+      )
+
+      const activatorWithImg = (
+        <div onClick={this.showGallery}>
+          <div class="default-activator cursor-pointer "><img src={this.value.url} width="50%" style={{ margin: 'auto' }} /></div>
+          <div class="flex-space-between" style="margin-top: 8px;">
+            <a-button size="small">更换</a-button>
+            {/* <a-button size="small" onClick={e => {
+              e.stopPropagation()
+            }}>裁剪</a-button> */}
+            <a-button size="small" onClick={(e) => {
+              e.stopPropagation()
+              this.handleSelect(new GalleryValue({ type: GalleryValueType.IMAGE, url: '' }))
+            }}>移除</a-button>
+          </div>
+        </div>
+      )
+
+      const activatorWithVideo = (
+        <div onClick={this.showGallery}>
+          <div class="default-activator cursor-pointer "><video src={this.value.url} width="50%" style={{ margin: 'auto' }} /></div>
+          <div class="flex-space-between" style="margin-top: 8px;">
+            <a-button size="small">更换</a-button>
+            <a-button size="small" onClick={(e) => {
+              e.stopPropagation()
+              this.handleSelect(new GalleryValue({ type: GalleryValueType.VIDEO, url: '' }))
+            }}>移除</a-button>
+          </div>
+        </div>
+      )
+      if (this.value && this.value.url && this.value.type === GalleryValueType.IMAGE) {
+        return (activatorWithImg)
+      } else if (this.value && this.value.url && this.value.type === GalleryValueType.VIDEO) {
+        return (activatorWithVideo)
+      } else {
+        return (activatorWithout)
+      }
+    }
+  },
+  render (h) {
+    return (
+      <div>
+        <slot>{this.renderDefaultActivator()}</slot>
+        <a-modal
+          closable
+          title="资源库"
+          width="65%"
+          visible={this.innerVisible}
+          onOk={this.handleClose}
+          onCancel={this.handleClose}
+          bodyStyle={{ margin: 0, padding: 0 }}
+        >
+          <div slot='okText'>确认</div>
+          <div slot='cancelText'>取消</div>
+          <a-layout style="height: 500px; position: relative;">
+            <a-layout-sider width="200px" style="background-color: white;">
+              <a-menu mode="inline"
+                      defaultSelectedKeys={['personalImage']}
+                      onClick={this.changeTab}>
+                {
+                  this.tabs.map((tab, index) => (
+                    <a-menu-item key={tab.value} >
+                      <a-icon type="user" />
+                      <span>{tab.label}</span>
+                    </a-menu-item>
+                  ))
+                }
+              </a-menu>
+            </a-layout-sider>
+            <a-layout-content>
+              {this.renderContent()}
+            </a-layout-content>
+          </a-layout>
+        </a-modal>
+      </div>
+    )
+  }
+}
+.default-activator {
+  border: 1px dashed #eee;
+  text-align: center;
+
+  img {
+    width: 50%;
+    border: 1px dashed #ccc;
+  }
+}
+
+.empty-bg-activator {
+  height: 178px;
+  line-height: 178px;
+}
 \ No newline at end of file
+/**
+ * 我的图片库组件。
+ */
+
+import axios from 'axios'
+import Uploader from 'core/support/resource-gallery/components/uploader.js'
+import { GalleryValue, GalleryValueType } from 'core/support/resource-gallery/components/galleryValue'
+
+export default {
+  data () {
+    return {
+      items: [], // 数据列表（GalleryValue类型）
+      loading: false, // 是否载入中
+      total: 30, // 总记录数
+      page: 1, // 第几页（从1开始）
+      pageSize: 30 // 每页大小
+    }
+  },
+  methods: {
+    uploadSuccess ({ file }) {
+      this.searchFiles()
+    },
+    beforeUpload (file) {
+      this.loading = true
+    },
+    searchFiles () {
+      this.loading = true
+      axios.get('/upload/getFiles', {
+          params: {
+            '_limit': this.pageSize,
+            '_start': (this.page - 1) * this.pageSize, // 后台页码从0开始
+            'mime': 'image'
+            // TODO：后面再加其他参数
+          }
+        })
+        .then(res => {
+          this.items = []
+          if (res.data && res.data.dataList && res.data.dataList.length > 0) {
+            for (let uploadFileDto of res.data.dataList) {
+              this.items.push(new GalleryValue({
+                url: uploadFileDto.url, // 获取路径
+                type: GalleryValueType.IMAGE // 图片类型
+              }))
+            }
+            this.total = res.data.totalDataCount
+            this.page = res.data.page
+            this.pageSize = res.data.size
+          }
+        })
+        .catch(err => {
+          this.$message.error('资源库数据查询失败')
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    }
+  },
+  render (h) {
+    return (
+      <div>
+        <a-spin tip="载入中..." spinning={this.loading}>
+          <a-card>
+            <Uploader
+              slot="extra"
+              beforeUpload={file => this.beforeUpload(file)}
+              uploadSuccess={info => this.uploadSuccess(info)}
+            />
+            <a-list
+              pagination={{
+                showSizeChanger: true,
+                total: this.total,
+                pageSize: this.pageSize,
+                onChange: (page, pageSize) => {
+                  this.page = page
+                  this.searchFiles()
+                  console.log(page)
+                },
+                onShowSizeChange: (currentPage, pageSize) => {
+                  this.pageSize = pageSize
+                  this.searchFiles()
+                }
+              }}
+              style="height: 400px; overflow: auto;"
+              grid={{ gutter: 12, column: 3 }}
+              dataSource={this.items}
+              renderItem={(item, index) => (
+                <a-list-item onClick={() => {
+                  this.$emit('changeItem', item)
+                }}>
+                  <a-card hoverable>
+                    <div
+                      slot="cover"
+                      style={{
+                        backgroundImage: `url(${item.url})`,
+                        backgroundSize: 'cover',
+                        height: '142px'
+                      }}>
+                    </div>
+                  </a-card>
+                </a-list-item>
+              )}
+            >
+            </a-list>
+          </a-card>
+        </a-spin>
+      </div>
+    )
+  },
+  mounted () {
+    // 请求数据
+    this.searchFiles()
+  }
+}
+/**
+ * 我的视频库组件。
+ */
+
+import axios from 'axios'
+import Uploader from 'core/support/resource-gallery/components/uploader.js'
+import { GalleryValue, GalleryValueType } from 'core/support/resource-gallery/components/galleryValue'
+
+export default {
+  data () {
+    return {
+      items: [], // 数据列表（GalleryValue类型）
+      loading: false, // 是否载入中
+      total: 30, // 总记录数
+      page: 1, // 第几页（从1开始）
+      pageSize: 30 // 每页大小
+    }
+  },
+  methods: {
+    uploadSuccess ({ file }) {
+      this.searchFiles()
+    },
+    beforeUpload (file) {
+      this.loading = true
+    },
+    searchFiles () {
+      this.loading = true
+      axios.get('/upload/getFiles', {
+        params: {
+          '_limit': this.pageSize,
+          '_start': (this.page - 1) * this.pageSize, // 后台页码从0开始
+          'mime': 'video'
+          // TODO：后面再加其他参数
+        }
+      })
+        .then(res => {
+          this.items = []
+          if (res.data && res.data.dataList && res.data.dataList.length > 0) {
+            for (let uploadFileDto of res.data.dataList) {
+              this.items.push(new GalleryValue({
+                url: uploadFileDto.url, // 获取路径
+                type: GalleryValueType.VIDEO // 图片类型
+              }))
+            }
+            this.total = res.data.totalDataCount
+            this.page = res.data.page
+            this.pageSize = res.data.size
+          }
+        })
+        .catch(err => {
+          this.$message.error('资源库数据查询失败')
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    }
+  },
+  render (h) {
+    return (
+      <div>
+        <a-spin tip="载入中..." spinning={this.loading}>
+          <a-card>
+            <Uploader
+              slot="extra"
+              beforeUpload={file => this.beforeUpload(file)}
+              uploadSuccess={info => this.uploadSuccess(info)}
+            />
+            <a-list
+              pagination={{
+                showSizeChanger: true,
+                total: this.total,
+                pageSize: this.pageSize,
+                onChange: (page, pageSize) => {
+                  this.page = page
+                  this.searchFiles()
+                  console.log(page)
+                },
+                onShowSizeChange: (currentPage, pageSize) => {
+                  this.pageSize = pageSize
+                  this.searchFiles()
+                }
+              }}
+              style="height: 400px; overflow: auto;"
+              grid={{ gutter: 12, column: 3 }}
+              dataSource={this.items}
+              renderItem={(item, index) => (
+                <a-list-item onClick={() => {
+                  this.$emit('changeItem', item)
+                }}>
+                  <a-card hoverable>
+                    <video
+                      onClick={function (e) {
+                        e.preventDefault() /* 阻止默认点击video标签的默认行为（播放行为） */
+                      }}
+                      controls
+                      slot="cover"
+                      src={item.url}
+                      style={{
+                        height: '240px'
+                      }}>
+                    </video>
+                  </a-card>
+                </a-list-item>
+              )}
+            >
+            </a-list>
+          </a-card>
+        </a-spin>
+      </div>
+    )
+  },
+  mounted () {
+    // 请求数据
+    this.searchFiles()
+  }
+}