ehais-resource-plug

资源库插件调用方法

文件引用

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">

参数说明

参数	类型	必填	描述
ref	String	Y	组件名称
controller	String	Y	组件类型 ：ueditor | image | gallery
model	String	Y	controller = image 时必填，参数类型为：{website:null,thumb:null,img:null,original:null}
path	String	Y	controller = image 时必填，参数类型为：URL
identity	String	N	默认是：admin（管理后台使用），开放网站使用 user
classify	String	Y	controller = gallery 时必填
tid	String	Y	controller = gallery 时必填
tname	String	Y	controller = gallery 时必填

初始化值

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>

组合百度编辑器 V3 使用

import UEditorV3 from "ehais-resource-plug/src/UEditor.v3";



components: { UEditorV3 },


<UEditorV3 ref="ueditor" id="ueditor" v-model:value="form.content" />

分类的对接

引用

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>

富文本编辑器

引用方式

import eWangEditor from "ehais-resource-plug/src/e-wang-editor";

组件定义

components:{eWangEditor}

组件引用

<eWangEditor ref="xeditor" v-model="form.content" @onchange="onContentChange"></eWangEditor>

组件函数调用

  onAdd() {
      this.dataIndex = -1;//新增
      this.form = Object.assign({}, form);
      this.form.classify = this.classify;
      this.$nextTick(() => {
          this.$refs.xeditor.initEditor();
      })
  },


  async onEdit(model, dIdx) {
      this.current = 0;
      this.dataIndex = dIdx;
      this.form = Object.assign({}, model);
      ...
      this.$nextTick(() => {
          this.$refs.xeditor.initEditor();
          this.$refs.xeditor.setContent(this.form.content);
      })
  },
  onContentChange(val) {
    this.form.content = val;
    if (!this.editorTimer) clearTimeout(this.editorTimer);
    var that = this;
    this.editorTimer = setTimeout(() => {
        if (val) val = val.replace(/style=""/gi, '').replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block" ');
        that.editorContent = val;
    }, 800);
    },
  async onSubmit(isNext = false, isClose = false) {
    this.form.content = this.$refs.xeditor.getContent();
  }

组件解释

props: {
    identity: { type: String, default: () => { return "admin" } },
    modelValue: { type: String, default: null },
},

 modelValue(val) {
            this.editor.txt.html(val);
        },

that.$emit("update:modelValue", val);

articleCatV3 主数据分类调用

<template>
  <div class="wrp">
    <articleCatV3
      title="课程分类"
      classify="course"
      module="cat"
      :columns="[
        { title: '分类名称', dataIndex: 'catName' },
        { title: '编号', dataIndex: 'catId', width: 100 },
        { title: '图标', key: 'pic', width: 150 },
        { title: '排序', dataIndex: 'sort', width: 80 },
        { title: '状态', key: 'status', width: 100 },
        { title: '操作', key: 'action', width: 130, fixed: 'right' },
      ]"
    />
  </div>
</template>

<script>
import articleCatV3 from "ehais-resource-plug/src/article-cat.v3";
export default {
  name: "ArticleCat",
  components: { articleCatV3 },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped></style>

a-switch 的使用

<a-switch :checked="master.form.status === 'enable' ? true : false" checked-children="开启" un-checked-children="停用" @change="(e) => { master.form.status = (e === true ? 'enable' : 'disable') }" />

开发调试

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

如何快速完全删除 node_modules

• npm install rimraf -g
• rimraf node_modules

js 混淆加密

• npm install javascript-obfuscator -g
• javascript-obfuscator a.js 结果输出到默认文件 a-obfuscated.js

npm install --verbose