simple-frame-unit 1.0.2

package/lib/packages/EasyDataView/EasyDataView.vue

@@ -0,0 +1,105 @@
+<template>
+  <ed-descriptions v-loading="initLoading" v-bind="moduleProp" :columns="descColumns" :data="formData" >
+    <!-- 展示列插槽 -->
+    <template v-for="name in slotNames" v-slot:[name]="scope">
+      <slot :name="name" v-bind="scope"></slot>
+    </template>
+  </ed-descriptions>
+</template>
+
+<script lang="jsx">
+import EasyDataMixins from "../../packages/mixins/EasyDataMixins";
+import {TempType} from "../../api/easyData";
+
+/**
+ * EasyDataView组件
+ * - 示例
+ *
+ * ```vue
+ *  <EasyDataView ref="BasicDescribe" :columns="descColumns" :controlConfig="controlConfig" :formData="formData">
+ *  </EasyDataView>
+ * ```
+ *
+ * 详细用法参考下方链接
+ *
+ * [EasyDataView组件使用示例](./web-comp/ExampleEasyDataViewCode.md)
+ *
+ * 混入属性参考
+ *
+ * [EasyDataMixins](./EasyDataMixins.md)
+ */
+export default {
+  name: "EasyDataView",
+  props: {
+    /**
+     * 属性配置
+     * @default {}
+     */
+    controlConfig: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+  },
+  mixins: [EasyDataMixins],
+  data() {
+    return {
+      // loading
+      initLoading: false,
+      // 描述信息
+      descColumns: [],
+      // 插槽名
+      slotNames:[]
+    }
+  },
+  watch: {
+    controlConfig: {
+      handler(newVal, oldVal) {
+        if (newVal && Object.keys(newVal).length > 0) {
+          const {controlInfos, controlProps, dataSource} = newVal
+          this.controlInfos = controlInfos
+          this.controlProps = controlProps
+          this.dataSource = dataSource
+
+          this.$nextTick(() => {
+            this.descColumns = this.getColumns(controlInfos, controlProps)
+            this.getSlotNames(this.descColumns)
+          })
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    // 有数据源名称且未传入controlConfig时，自动发起请求
+    dataSourceName: {
+      deep: true,
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (newVal && newVal !== oldVal && (Object.keys(this.controlConfig).length === 0)) {
+          this.initControls().then(({controlInfos, controlProps}) => {
+            this.descColumns = this.getColumns(controlInfos, controlProps)
+            this.getSlotNames(this.descColumns)
+          })
+        }
+      }
+    }
+  },
+  methods:{
+    // 插槽项
+    getSlotNames(columns){
+      columns.map(column =>{
+        this.slotNames.push(column.prop.includes('.') ? column.prop.split('.').pop() : column.prop)
+      })
+    },
+    getType(){
+      return TempType.view
+    },
+    getFormData(){
+      return new Promise((resolve, reject)=>{
+        resolve(true)
+      })
+    }
+  }
+}
+</script>

package/lib/packages/EdRichPreview/index.js

@@ -0,0 +1,32 @@
+import Vue from "vue";
+import replaceUrl from "../EdRichText/replaceUrl"
+let Content = null
+export default {
+    name: 'EdRichPreview',
+    props: {
+        value: {type: String, default: '',},
+    },
+    // 文章编辑相关配置
+    data() {
+        return {
+            editor: null,
+            // 这里的 HTML 内容必须是 wangEditor 生成的（即 editor.getHtml() 返回的） HTML 格式，不可以自己随意写
+            defaultHtml: this.value,
+        }
+    },
+    render(h) {
+        if (this.value !== "") {
+            let dome = replaceUrl(this.value, this.$EdFrame.BASE_API, true)
+            Content = Vue.extend({
+                template: `<div><template>${dome}</template></div>`
+            })
+            return Content ? h(Content) : null
+        }
+        return h('span')
+    },
+    methods: {
+
+
+    },
+
+}

package/lib/packages/EdRichText/index.vue

@@ -0,0 +1,167 @@
+<template>
+  <!-- 富文本编辑器 -->
+  <div class="editor">
+    <Toolbar :defaultConfig="toolbarConfig" :editor="editor" :mode="mode" class="editor-toolbar"/>
+
+    <Editor
+      v-model="defaultHtml"
+      :defaultConfig="editorConfigs"
+      :mode="mode"
+      class="editor-content"
+      @customPaste="customPaste"
+      @onChange="onChange"
+      @onCreated="onCreated"
+    />
+  </div>
+</template>
+
+<script>
+import {Editor, Toolbar} from '@wangeditor/editor-for-vue';
+import "@wangeditor/editor/dist/css/style.css";
+import {deepMerge}       from "../../utils/utils";
+import replaceUrl        from "./replaceUrl";
+
+/**
+ * 富文本编辑器
+ * - 示例
+ *
+ * ```vue
+ * <ed-wang-editor v-model="value"></ed-wang-editor>
+ * ```
+ */
+export default {
+  name: 'EdRichText',
+  components: {Editor, Toolbar},
+  props: {
+    value: {type: String, default: '',},
+    // 'default' or 'simple'
+    mode: {type: String, default: 'default'},
+    // 工具栏配置
+    toolbarConfig: {
+      type: Object,
+      default: () => {
+        return {
+          //排除某些菜单，其他都保留
+          excludeKeys: ["group-video"],
+        }
+      }
+    },
+    // 编辑器配置（图片如配置颜色、字体、链接校验、上传图片等）
+    editorConfig: {
+      type: Object,
+      default: () => {
+        return {
+          placeholder: "<p style='font-size: 14px'>请输入内容...</p>",
+          // 所有的菜单配置，都要在 MENU_CONF 属性下
+          MENU_CONF: {}
+        }
+      }
+    }
+  },
+  // 文章编辑相关配置
+  data() {
+    return {
+      editor: null,
+      // 这里的 HTML 内容必须是 wangEditor 生成的（即 editor.getHtml() 返回的） HTML 格式，不可以自己随意写
+      defaultHtml: "",
+      // 默认编辑器配置
+      defaultConfig: {
+        placeholder: "<p style='font-size: 14px'>请输入内容...</p>",
+        // 所有的菜单配置，都要在 MENU_CONF 属性下
+        MENU_CONF: {
+          uploadImage: {
+            customUpload: this.customUpload
+          },
+          uploadVideo: {
+            customUpload: this.customUpload
+          }
+        }
+      }
+    }
+  },
+  watch: {
+    value: {
+      deep: true,
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (newVal) {
+          this.defaultHtml = replaceUrl(newVal, this.$EdFrame.BASE_API, false)
+        }
+      }
+    }
+  },
+  computed: {
+    editorConfigs() {
+      return deepMerge(this.defaultConfig, this.editorConfig)
+    }
+  },
+  methods: {
+    /**
+     * @name customUploadImage
+     * @param file
+     * @param insertFn
+     * @desc 自定义上传图片
+     */
+    customUpload(file, insertFn) {
+      let param = new FormData(); //创建form对象
+      param.append('file', file)
+      let UPLOAD_URL = this.$EdFrame.BASE_API + '/admin-api/easydata/common/upload'
+      this.$EdFrame.uploadAction(UPLOAD_URL, param).then(response => {
+        if (response.success) {
+          let FileUrl = `${this.$EdFrame.BASE_API}/admin-api/infra/file/${response.data.configId}/get/${response.data.filePath}?t=image`
+          insertFn(FileUrl)
+        }
+      })
+    },
+
+    // 编辑器创建完毕时的回调函数。
+    onCreated(editor) {
+      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
+    },
+
+    // 对用户剪切板内容的处理
+    customPaste(editor, event) {
+      // event 是 ClipboardEvent 类型，可以拿到粘贴的数据
+      const text = event.clipboardData.getData('text/plain'); // 获取粘贴的纯文本
+      editor.insertText(text);
+      event.preventDefault(); // 阻止默认的粘贴行为
+      return false;
+    },
+
+    //onChange 时获取编辑器最新内容
+    onChange(e) {
+      this.$emit("input", e.getHtml())
+    },
+    // 编辑器 focus 时的回调函数。
+    onFocus(e) {
+      this.$emit("onFocus", e)
+    },
+    // 编辑器 blur 时的回调函数。
+    onBlur(e) {
+      this.$emit("onBlur", e)
+    },
+  },
+  //组件销毁时，及时销毁编辑器
+  beforeDestroy() {
+    const editor = this.editor
+    if (editor == null) return
+    editor.destroy() // 组件销毁时，及时销毁编辑器
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.editor {
+  border: 1px solid #ccc;
+
+  .editor-toolbar {
+    border-bottom: 1px solid #ccc
+  }
+
+  .editor-content {
+    height: 500px;
+    overflow-y: hidden;
+  }
+}
+</style>
+

package/lib/packages/EdRichText/replaceUrl.js

@@ -0,0 +1,49 @@
+/**
+ * 重置产品介绍中图片地址
+ * @name getImgSrc
+ * */
+export default function replaceUrl(htmlStr, url, preview = false) {
+    try {
+        const imgReg = /<img.*?(?:>|\/>)/gi // 匹配图片中的img标签
+        const videoReg = /<video(([\s\S])*?)<\/video>/gi // 匹配图片中的img标签
+        return htmlStr.replace(imgReg, (match, capture) => {
+            return resetString(match, preview ? "image" : "img", url)
+        }).replace(videoReg, (match, capture) => {
+            return resetString(match, "video", url)
+        });
+    } catch (e) {
+        //TODO handle the exception
+        return htmlStr;
+    }
+}
+
+// 替换文件预览地址
+function resetString(match, type, url) {
+    const srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i // 匹配图片中的src
+    let srcStr = match.match(srcReg)
+    let params = getUrlParams(srcStr[1])
+    let isUpload = Object.keys(params).length > 0 && hasObject(params, "t")
+    let str = srcStr[1].slice(srcStr[1].indexOf('/admin-api'), srcStr[1].length)
+    let dome = match.replace(srcReg, `src="${url + str}"`)
+
+    if (isUpload) {
+        return type === 'image' ? dome.replace('img', `ed-image preview`) + '</ed-image>' : dome
+    } else {
+        return match
+    }
+}
+
+// 检测对象中是否包含指定字段
+function hasObject(thisArg, ...argArray) {
+    return Object.prototype.hasOwnProperty.call(thisArg, ...argArray)
+}
+
+function getUrlParams(url) {
+    // \w+ 表示匹配至少一个(数字、字母及下划线), [\u4e00-\u9fa5]+ 表示匹配至少一个中文字符
+    let pattern = /(\w+|[\u4e00-\u9fa5]+)=(\w+|[\u4e00-\u9fa5]+)/ig;
+    let result = {};
+    url.replace(pattern, ($, $1, $2) => {
+        result[$1] = $2;
+    })
+    return result
+}

package/lib/packages/components/FileView.vue

@@ -0,0 +1,97 @@
+<template>
+    <span>
+        <el-link type="primary" @click="openUploadClick">文件({{ list.length }})</el-link>
+        <ed-dialog ref="edDialog" :showOkBtn="false" :visible.sync="visible" title="预览" @close="visible = false">
+            <el-table :data="list" border>
+                <el-table-column label="文件名称" prop="name">
+                </el-table-column>
+                <el-table-column fixed="right" label="操作" width="100">
+                    <template slot-scope="scope">
+                        <el-button size="small" type="text" @click="preview(scope.row)">预览</el-button>
+                        <el-button size="small" type="text" @click="uploadHandleDownload(scope.row)">下载</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </ed-dialog>
+        <ed-dialog ref="iframeDialog" :fullscreen="true" :showOkBtn="false" :title="title"
+                   :visible.sync="iframeVisible" @close="iframeVisible = false">
+            <div v-loading="loading" style="height: 100%;">
+                <iframe ref="Iframe" :src="src" class="iframeClass" height="100%" width="100%"></iframe>
+            </div>
+        </ed-dialog>
+    </span>
+</template>
+
+<script>
+import {getFileAccessHttpUrl, DefaultUrl } from "../../api/easyData";
+import {encode}               from "js-base64";
+
+export default {
+  name: "FileView",
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      iframeVisible: false,
+      src: '',
+      title: '',
+      loading: false,
+    }
+  },
+  methods: {
+    openUploadClick() {
+      this.visible = true
+    },
+    preview(cellValue) {
+      this.title = cellValue.name
+      let imageTypes = ['jpg', 'gif', 'jpeg', 'png']
+      const imageList = imageTypes.includes(cellValue.type) ? [{...cellValue, url: this._makeUrl(cellValue)}] : []
+      const fileUrl = !imageTypes.includes(cellValue.type) ? [this._makeUrl(cellValue)] : []
+      if (fileUrl.length > 0) {
+        this.src = this.$EdFrame.FILE_PREVIEW_URL + encodeURIComponent(encode(fileUrl.join('|')))
+        this.iframeVisible = true
+        this.$nextTick(() => this.iframeLoad())
+      } else if (imageList.length > 0) {
+        this.$viewerApi({images: imageList})
+      }
+    },
+    /**
+     * @name 文件下载
+     * @param file
+     * @description 新窗口打开
+     */
+    uploadHandleDownload(file) {
+      if (file.filePath) window.open(this._makeUrl(file))
+    },
+    /** 把file对象转换为下载url全地址 */
+    _makeUrl(file) {
+      return getFileAccessHttpUrl(DefaultUrl.downloadUrl + file.configId + "/get/" + file.filePath)
+    },
+    iframeLoad() {
+      this.loading = true;
+      const iframe = this.$refs.Iframe;
+      console.info(this.$refs, iframe)
+      if (iframe.attachEvent) { // IE
+        iframe.attachEvent('onload', () => {
+          this.loading = false;
+        });
+      } else { // 非IE
+        iframe.onload = () => {
+          this.loading = false;
+        };
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.iframeClass {
+  border: none;
+}
+</style>

package/lib/packages/index.js

@@ -0,0 +1,11 @@
+import EasyDataView from './EasyDataView/EasyDataView.vue'
+import EasyDataList from './EasyDataList/EasyDataList.vue'
+import EasyDataTable from './EasyDataTable/EasyDataTable.vue'
+import EasyDataForm from './EasyDataForm/EasyDataForm.vue'
+
+export const packages = {
+  EasyDataView,
+  EasyDataList,
+  EasyDataForm,
+  EasyDataTable,
+}

package/lib/packages/mixins/EasyDataMixins.js

@@ -0,0 +1,133 @@
+import { getVarType } from "../../utils/utils";
+import useTable from "./useTable"
+import {initControls, TempType} from "../../api/easyData";
+export default {
+  mixins: [useTable],
+  data(){
+    return {
+      initLoading: false,
+      controlInfos: [],
+      controlProps: {},
+      dataSource: {},
+    }
+  },
+  props: {
+    /**
+     * 数据源名称
+     * @default ''
+     */
+    dataSourceName: {type: String, default: ''},
+    /**
+     * 视图ID,用于显示不同视图
+     * @default 'default'
+     */
+    viewId: {type: String, default: 'default'},
+    /**
+     * 业务请求参数,仅模板使用
+     * @default {}
+     */
+    bizParams: {type: Object, default: () => {}},
+    /**
+     * 表单数据默认值,新增接口提交数据会自动带上
+     * @default {}
+     */
+    formData: {type: [Array, Object], default: () => {}},
+    /**
+     * 额外请求参数,仅模板使用
+     * @default {}
+     */
+    extraParams: {type: Object, default: () => {}},
+    /**
+     * 数据源传递
+     * @default []
+     */
+    passModuleIds: {type: Array, default: () => []},
+    /**
+     * 模块属性 模块使用自定义属性
+     * @default {}
+     */
+    moduleProp: {
+      type: Object,
+      default: () => {
+        return {
+          showAddBtn: false,
+          showAction: false
+        }
+      }
+    }
+  },
+  methods:{
+    /**
+     * 初始化表单模板数据
+     * @returns {Promise<void>}
+     */
+    initControls() {
+      return new Promise(async (resolve, reject) => {
+        this.initLoading = true
+       try {
+         const result = await initControls(this.dataSourceName, this.viewId)
+         const {data: {controlInfos, controlPropsMap, dataSource}} = result;
+         this.controlInfos = this.getControlInfo(controlInfos)
+         this.controlProps = controlPropsMap
+         this.dataSource = dataSource
+
+         resolve({
+           dataSource: dataSource,
+           controlProps: controlPropsMap,
+           controlInfos: controlInfos
+         })
+       }catch (e) {
+         reject(e)
+       }
+        this.initLoading = false
+      })
+    },
+
+    /**
+     * @name getControlInfo
+     * @param controlInfos
+     * @returns {*}
+     * @description 获取表单控件属性
+     */
+    getControlInfo(controlInfos) {
+      this.$emit('editControlInfos', controlInfos)
+      return controlInfos
+    },
+
+    /**
+     * 获取当前模板类型
+     * @returns
+     */
+    getType(){
+      return TempType.save
+    },
+
+    /** 获取指定二级模块数据，或者所有需要的二级模块数据 */
+    getPassModuleData(moduleId = this.passModuleIds) {
+      if(moduleId && this._tempV) {
+        if(getVarType(moduleId) === 'string') {
+          return this._tempV.getFormData(moduleId)
+        } else if (getVarType(moduleId) === 'array' && moduleId.length > 0) {
+          let PromiseAll = []
+          moduleId.map(item=>{
+            PromiseAll.push(this._tempV.getFormData(item))
+          })
+          return new Promise((resolve, reject) => {
+            Promise.all(PromiseAll).then(data => {
+              resolve(data)
+            }).catch(err => {
+              console.log(err)
+              reject(false)
+            })
+          })
+        }
+      }
+      return new Promise((resolve, reject) => {resolve({})})
+    },
+
+    // 检测对象中是否包含指定字段
+    hasObject(thisArg, ...argArray){
+      return Object.prototype.hasOwnProperty.call(thisArg, ...argArray)
+    },
+  }
+}