ehais-resource-plug v1.0.8

资源库插件调用方法

文件引用

import galleryResource from 'ehais-resource-plug/src/gallery'
import documentResource from 'ehais-resource-plug/src/document'
import audioResource from 'ehais-resource-plug/src/audio'
import videoResource from 'ehais-resource-plug/src/video'

组件定义

components: { galleryResource, documentResource, videoResource, audioResource }

组件调用

• 示例一

  <galleryResource ref="组件名称" controller="组件类型：ueditor|image|gallery" :classify="classify" tname="article" :tid="form.articleId" @event="确定图片的事件" @remove="删除原来图片事件" :model="初始化图片的对象(image)" identity="admin(默认)|user">

• 示例二

  <galleryResource ref="组件名称" controller="组件类型：ueditor|image|gallery" :classify="classify" tname="article" :tid="form.articleId" @event="确定图片的事件" @remove="删除原来图片事件" :path="初始化图片的路径(image)" identity="admin(默认)|user">

参数说明

初始化值

data(){
  return {
    imageModel : null,  classify: null,   tid: null,  tname : null, path : null
  }
}

组件示例(委托型)

<galleryResource ref="resourceUEditor" controller="ueditor" @event="onResourceUEditorEvent" identity="admin" />
<galleryResource ref="resourceImage" controller="image" @event="onResourceImageEvent" @remove="onResourceImageRemove" :model="imageModel" identity="admin" />
<galleryResource ref="resourceGaller" controller="gallery" @event="onResourceGallerEvent" @remove="onResourceGalleryRemove" :gallery="gallery" identity="admin" />

组件示例(直调型)

<galleryResource ref="resourceImage" controller="image" :model="imageModel" identity="admin" />
<galleryResource ref="resourceGaller" controller="gallery" :classify="classify" :tname="tname" :tid="tid" identity="admin" />

例：

<galleryResource ref="resourceGaller" controller="gallery" :classify="classify" tname="article" :tid="form.articleId" identity="admin" />

image.model赋值

this.imageModel = Object.assign({}, this.form)

image.model取值

var resource = this.$refs.resourceImage.getData();
this.form.thumb = resource.thumb;
this.form.img = resource.img;
this.form.original = resource.original;
this.form.website = resource.website;

组合百度编辑器使用

文件引用

import VueUeditorWrap from 'vue-ueditor-wrap'
import { ueConfig } from 'ehais-resource-plug/src/util'

组件定义

components: { VueUeditorWrap },

组件调用

<VueUeditorWrap ref="vUeditor" v-model="form.content" :config="ueConfig" />

<galleryResource ref="resourceUEditor" controller="ueditor" @event="onResourceUEditorEvent"></galleryResource>

组件配置

mounted () {
  var that = this;
  this.ueConfig = ueConfig({ resourceImageEvent: function () { that.$refs.resourceUEditor.open(); } });
},

相册保存

this.$refs.resourceGaller.onGallerySave(res.model.id);

调用完整示例

<template>
  <div>
    <VueUeditorWrap ref="vUeditor" v-model="content" :config="ueConfig" />
    <galleryResource ref="resourceUEditor" controller="ueditor" @event="onResourceUEditorEvent" identity="admin" />
    <galleryResource ref="resourceImage" controller="image" @event="onResourceImageEvent" @remove="onResourceImageRemove" :model="imageModel" identity="admin" />
    <galleryResource ref="resourceGaller" controller="gallery" @event="onResourceGallerEvent" @remove="onResourceGalleryRemove" :gallery="gallery" identity="admin" />
  
    或者


    <galleryResource ref="resourceImage" controller="image" :model="imageModel" identity="admin" />
    <galleryResource ref="resourceGaller" controller="gallery" :classify="classify" :tname="tname" :tid="tid" identity="admin" />
    
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
import { ueConfig } from 'ehais-resource-plug/src/util'
import galleryResource from 'ehais-resource-plug/src/gallery'
import documentResource from 'ehais-resource-plug/src/document'
import videoResource from 'ehais-resource-plug/src/video'
export default {
  name: 'software-product',
  components: { VueUeditorWrap, galleryResource, documentResource, videoResource },
  data () {
    return {
      ueConfig: null, content: null, controller: null, visible: false, imageModel: {}, gallery: []
    }
  },
  mounted () {
    var that = this;
    this.ueConfig = ueConfig({ resourceImageEvent: function () { that.$refs.resourceUEditor.open(); } });
    
  },
  methods: {
    onResourceUEditorEvent (data) {
      this.$refs.vUeditor.editor.execCommand('insertHtml', "<img src='" + data.website + data.img + "'>")
    },
    onResourceImageEvent (data) {//对象
      this.form.website = data.website;
      this.form.thumb = data.thumb;
      this.form.img = data.img;
      this.form.original = data.original;
    },
    onResourceImageRemove () {
      this.imageModel = null;
    },
    onResourceGallerEvent (data) {//数组
      console.log("onResourceGallerEvent", JSON.stringify(data));
      this.gallery = data;
    },
    onResourceGalleryRemove (index) {
      this.gallery.splice(index, 1);
    }
  }
}
</script>

<style>
</style>

分类的对接

引用

import articleCatResource from 'ehais-resource-plug/src/article-cat'

组件定义

components: { articleCatResource },

调用

<articleCatResource :classify="classify" :module="module" :image="true" :parent="true" title="分类" />

分类下拉菜单

引用

import catSelectResource from 'ehais-resource-plug/src/select/cat'
import { catData } from 'ehais-resource-plug/src/data'

组件定义

components: { catSelectResource },

对象定义

data () {
  return {
    classify: "classify", module: "module", catDataSource:[]
  }
},

初始化数据

async mounted () {
  this.catDataSource = await catData({ classify: this.classify, module: this.module });
},

调用

<catSelectResource v-model="form.catId" :data="catDataSource" />


<a-form-model-item label="类型" help="备注信息">
  <catSelectResource v-model="form.catId" :data="catDataSource" />
</a-form-model-item>

cat-master-select 下拉菜单使用方式

import catMasterSelectResource from 'ehais-resource-plug/src/select/cat-master'
import { catMasterData } from 'ehais-resource-plug/src/data';
components: { catMasterSelectResource },

<a-form-model-item label="隶属上级" prop="" help="">
    <catMasterSelectResource v-model="form.parentUuid" :classify="classify" :module="module"/>
</a-form-model-item>


catMasterData({ classify: this.classify, module: this.module }, true)//保存成功后刷新缓存

cat-master-tree-select 树状下拉菜单使用方式

import catMasterTreeSelectResource from 'ehais-resource-plug/src/select/cat-master-tree'
import { catMasterTreeData } from 'ehais-resource-plug/src/data';
components: { catMasterTreeSelectResource },

<a-form-model-item label="隶属上级" prop="" help="">
    <catMasterTreeSelectResource v-model="form.parentUuid" :classify="classify" :module="module"/>
</a-form-model-item>

catMasterTreeData({ classify: this.classify, module: this.module }, true).then(res => {
    this.dataSource = res.treeData;
})//刷新缓存并返回最新的列表数据

分类树状下拉菜单

引用

import catTreeSelectResource from 'ehais-resource-plug/src/select/cat-tree'
import { catTreeData } from 'ehais-resource-plug/src/data'

组件定义

components: { catTreeSelectResource },

对象定义

data () {
  return {
    classify: "classify", module: "module", catTreeDataSource:[]
  }
},

初始化数据

async mounted () {
  this.catTreeDataSource = await catTreeData({ classify: this.classify, module: this.module });
},

调用

<catTreeSelectResource v-model="form.catId" :data="catTreeDataSource" />


<a-form-model-item label="类型" help="备注信息">
  <catTreeSelectResource v-model="form.catId" :data="catTreeDataSource" />
</a-form-model-item>

开发调试

• 更新本项目：git pull
• 首次安装依赖包：cnpm install
• 生成链接：npm link
• 在需要调用的项目引用：npm link ehais-resource-plug

如何快速完全删除node_modules

• npm install rimraf -g
• rimraf node_modules