ocpview-plus 0.0.1

package/src/components/wrichtextbox/editor.vue

@@ -0,0 +1,219 @@
+<template>
+    <div>
+        <div style="border: 1px solid #ccc; margin-top: 10px;">
+            <Toolbar
+                :editor="editorRef"
+                :defaultConfig="toolbarConfig"
+                :mode="mode"
+                style="border-bottom: 1px solid #ccc"
+            />
+            <Editor
+                :defaultConfig="editorConfig"
+                :mode="mode"
+                v-model="valueHtml"
+                :style="editorStyle"
+                @onCreated="handleCreated"
+                @onChange="handleChange"
+                @onDestroyed="handleDestroyed"
+                @onFocus="handleFocus"
+                @onBlur="handleBlur"
+                @customAlert="customAlert"
+                @customPaste="customPaste"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+import '@wangeditor/editor/dist/css/style.css'
+import { onBeforeUnmount, ref, shallowRef, onMounted ,watch, computed} from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+
+export default {
+  components: { Editor, Toolbar },
+  props:["value","myConfig"],
+  setup(props, context) {
+    // 编辑器实例，必须用 shallowRef，重要！
+    const editorRef = shallowRef()
+    const readOnly = ref(true);
+    // 内容 HTML
+    const valueHtml = ref('')
+
+    const myConfig = computed(()=>{
+        return  props.myConfig; 
+    })
+    if (myConfig.value.readOnly !== undefined) {
+        readOnly.value = myConfig.value.readOnly;
+    }
+    // 模拟 ajax 异步获取内容
+    onMounted(() => {
+        setTimeout(() => {
+            const editor = editorRef.value
+            if (editor == null) return
+            if (readOnly.value) {
+                editor.disable()
+            } else {
+                editor.enable()
+            }
+        }, 1500)
+    })
+    const editorStyle = computed(()=>{
+        let style = {};
+        style['overflow-y'] = 'hidden';
+        if (myConfig.value.editorStyle) {
+            Object.assign(style,myConfig.value.editorStyle);
+        }
+        return style;
+    })
+    const fatherValue = computed(()=>{
+        return  props.value; 
+    })
+    watch(() => fatherValue, (val) => {
+        const text = valueHtml.value
+        if (text !== val.value) {
+            valueHtml.value = val.value;
+        }
+    },{deep:true, immediate: true})
+
+    const toolbarConfig = {
+       excludeKeys:  ["group-image","group-video","codeBlock"]
+    }
+    const editorConfig = { 
+        placeholder: '请输入内容...',
+        MENU_CONF:{
+            fontSize:  {
+                fontSizeList: [
+                    { name: '初号', value: '42px' },
+                    { name: '小初', value: '36px' },
+                    { name: '一号', value: '26px' },
+                    { name: '小一', value: '24px' },
+                    { name: '二号', value: '22px' },
+                    { name: '小二', value: '18px' },
+                    { name: '三号', value: '16px' },
+                    { name: '小三', value: '15px' },
+                    { name: '小四', value: '12px' },
+                    { name: '五号', value: '10.5px' },
+                    { name: '小五', value: '9px' },
+                    { name: '六号', value: '7.5px' },
+                    { name: '小六', value: '6.5px' },
+                    { name: '七号', value: '5.5px' },
+                    { name: '八号', value: '5px' },
+                ]
+            },
+            fontFamily: {
+                fontFamilyList:[  
+                    { name: '宋体', value: 'SimSun' },
+                    { name: '楷体', value: 'KaiTi' },
+                    { name: '仿宋', value: 'FangSong' },
+                    { name: '黑体', value: 'SimHei' },
+                    { name: '微软雅黑', value: 'Microsoft-YaHei' },
+                    'PmingLiu',
+                    'Impact',
+                    'Georgia',
+                    'Tahoma',
+                    'Arial',
+                    'Verdana'
+                ]
+            } 
+        } 
+    }
+
+    // 组件销毁时，也及时销毁编辑器，重要！
+    onBeforeUnmount(() => {
+        const editor = editorRef.value
+        if (editor == null) return
+
+        editor.destroy()
+    })
+
+    // 编辑器回调函数
+    const handleCreated = (editor) => {
+      console.log('created', editor);
+      editorRef.value = editor // 记录 editor 实例，重要！
+    }
+    const handleChange = (editor) => {
+        const text =  editor.getHtml()
+        console.log('change:', text)
+        context.emit('updateValue', text)
+    }
+    const handleDestroyed = (editor) => {
+      console.log('destroyed', editor)
+    }
+    const handleFocus = (editor) => {
+        console.log('focus', editor)
+    }
+    const handleBlur = (editor) => {
+        console.log('blur', editor)
+        const text =  editor.getHtml()
+        console.log('blur:', text)
+        context.emit('updateValue', text)
+    }
+    const customAlert = (info, type) => {
+        alert(`【自定义提示】${type} - ${info}`)
+    }
+    const customPaste = (editor, event, callback) => {
+        //console.log('ClipboardEvent 粘贴事件对象', event)
+        // 自定义插入内容
+        //editor.insertText('xxx')
+        // 返回值（注意，vue 事件的返回值，不能用 return）
+        //callback(false) // 返回 false ，阻止默认粘贴行为
+        callback(true) // 返回 true ，继续默认的粘贴行为
+    }
+
+    const insertText = (value) => {
+        const editor = editorRef.value
+        if (editor == null) return
+        editor.focus()
+        editor.insertText(value)
+    }
+
+    const printHtml = () => {
+        const editor = editorRef.value
+        if (editor == null) return
+        console.log(editor.getHtml())
+    }
+
+    const disable = () => {
+        const editor = editorRef.value
+        if (editor == null) return
+        editor.disable()
+    }
+    const setReadOnly = (value) =>{
+        readOnly.value = value;
+        const editor = editorRef.value
+        if (editor == null) return;
+        if (readOnly.value) {
+            editor.disable()
+        }else {
+            editor.enable()
+        }
+    }
+    const getValue = () => {
+        const editor = editorRef.value
+        if (editor == null) return
+        return editor.getHtml();
+    }
+ 
+    return {
+      editorRef,
+      mode: 'default',
+      valueHtml,
+      toolbarConfig,
+      editorConfig,
+      handleCreated,
+      handleChange,
+      handleDestroyed,
+      handleFocus,
+      handleBlur,
+      customAlert,
+      customPaste,
+      insertText,
+      printHtml,
+      disable,
+      setReadOnly,
+      getValue,
+      editorStyle
+    };
+  }
+}
+</script>

package/src/components/wrichtextbox/index.js

@@ -0,0 +1,2 @@
+import wRichTextBox from './wrichtextbox.vue';
+export default wRichTextBox;

package/src/components/wrichtextbox/wrichtextbox.vue

@@ -0,0 +1,63 @@
+<template>
+  <div  v-show="myConfig.visible" @keydown.enter.stop="keyDown">
+    <Editor ref="myControl" :myConfig="myConfig"  :value="value"  @updateValue="onEditorChange"/>
+  </div>
+</template>
+<script>
+// 工具栏配置
+import Base from '@/components/base/controlbase.vue';
+import Editor from './editor.vue';
+export default {
+    name: 'wrichtextbox',
+    components:{
+        Editor
+    },
+    extends: Base,
+    data () {
+        return {
+            myConfig:{
+                editorStyle:{
+                    'height':'auto'
+                },
+              }
+        };
+    },
+
+    mounted () {
+        //eslint-disable-next-line no-labels
+    },
+    methods:{
+        customInit () {
+        },
+        onEditorFocus () {
+            if (this.$refs.myControl) {
+                this.$refs.myControl.setReadOnly(this.myConfig.readOnly);
+            }
+            
+        },
+        onEditorChange (value) {
+            this.value = value;
+            // 内容改变事件
+            this.setFatherValue();
+            //this.$emit('inputValue', this.content);
+        },
+   
+        keyDown (e) {
+            //e.stopPropagation();
+        },
+        setDynamicText(value) {
+            if (this.$refs.myControl) {
+               this.$refs.myControl.insertText(value);
+            }
+        },
+        setCustomPro(obj) {
+            if (obj) {
+                this.myConfig = Object.assign({}, this.myConfig, obj);
+            }
+            if (obj.readOnly !== undefined) {
+                this.onEditorFocus();
+            }   
+        }
+    }
+};
+</script>

package/src/index.js

@@ -0,0 +1,215 @@
+import ViewUI from 'view-ui-plus';
+import iviewCoustom from './static/iview/coustom';
+import pkg from '../package.json';
+// import 'view-ui-plus/dist/styles/viewuiplus.css'
+/** 自定义封装 */
+// import './styles/components/iconfont/index.js';
+import Method from './method/index';
+import store from './store/index';
+import 'viewerjs/dist/viewer.css';
+import '@vueup/vue-quill/dist/vue-quill.snow.css';
+import { Ebutton, Toolbar } from './components/toolbar';
+import ComboBox from './components/combobox';
+import {
+    ExpandRow,
+    EditGrid,
+    ViewGrid,
+    ViewGridBase,
+    EditGridCard,
+} from './components/grid';
+import TextBox from './components/textbox';
+import RichTextBox from './components/richtextbox';
+import { NumberBox, NumberRangeBox } from './components/numberbox';
+import { DateBox, DateRangeBox } from './components/datebox';
+import TimePicBox from './components/timebox';
+import PopTextBox from './components/poptextbox';
+import { ControlBox, ControlBase} from './components/base';
+import {
+    ConditionBox,
+    QueryConditionBoxBase,
+    ConditionSelectorBox,
+    ConditionFilterBox,
+} from './components/conditionbox';
+import {PictureBox,FileBox} from './components/picturebox';
+import VideoBox from './components/videobox';
+import { CheckBox, CheckGroupBox } from './components/checkbox';
+import {
+    FormBox,
+    FormDetail,
+    WorkForm,
+    BaseForm,
+    FormCardBox,
+    FormCardGroupBox,
+    DetailsBox,
+} from './components/form';
+import ShowText from './components/label';
+import BillImport  from './components/upload';
+import { TreeBox, TreeBoxBase } from './components/tree';
+import CommonIcon  from './components/icon';
+import BillBox from './components/billbox';
+import RadioGroupBox  from './components/radiobox';
+import ColorBox from './components/colorbox';
+import {
+    MyBar,
+    MyPie,
+    MyBarLine,
+    MyLine,
+    MyScatter,
+    MyGauge,
+    MyRadar,
+    MyLiquidFill
+} from './components/mychart';
+import PopTagBox from './components/poptagbox';
+import CascaderBox from './components/cascaderbox';
+
+import {
+    RowBtnToolbar,
+    PageCustom,
+    SimpleViewGrid,
+    DetailBtnToolbar,
+    BillTemplate,
+    SimpleTree,
+    mListDetails,
+    mLeftListRightDetails,
+    mLeftTreeRightDetails,
+    mLeftListRightList,
+    mBillSingleGrid,
+    mReportBill,
+    mLevelReport,
+    mBirtReport,
+    ListBtnToolbar,
+    mAppendixBoxs,
+    PromptMessages,
+    BillOperLog,
+    mFormCardBox,
+    mEditGridCard,
+    mBillAsyncImport,
+    mBillImport
+} from './components/masterplate';
+
+import MapBox from './components/map';
+import wRichTextBox from './components/wrichtextbox';
+
+const components = {
+    /*自定义组件*/
+   Ebutton,
+   Toolbar,
+   ComboBox,
+   ExpandRow,
+   EditGrid,
+   ViewGridBase,
+   ViewGrid,
+   EditGridCard,
+   TextBox,
+   RichTextBox,
+   NumberBox,
+   NumberRangeBox,
+   DateBox,
+   DateRangeBox,
+   TimePicBox,
+   PopTextBox,
+   ControlBox,
+   ControlBase,
+   ConditionBox,
+   QueryConditionBoxBase,
+   ConditionSelectorBox,
+   ConditionFilterBox,
+   FormBox,
+   FormDetail,
+   WorkForm,
+   FormCardBox,
+   FormCardGroupBox,
+   DetailsBox,
+   PictureBox,
+   FileBox,
+   VideoBox,
+   CheckBox,
+   CheckGroupBox,
+   BillBox,
+   ShowText,
+   BillImport,
+   TreeBoxBase,
+   TreeBox,
+   CommonIcon,
+   RadioGroupBox,
+   BaseForm,
+   MyBar,
+   MyBarLine,
+   MyPie,
+   MyLine,
+   MyScatter,
+   MyGauge,
+   MyRadar,
+   MyLiquidFill,
+   PopTagBox,
+   CascaderBox,
+   ColorBox,
+   RowBtnToolbar,
+   PageCustom,
+   DetailBtnToolbar,
+   BillTemplate,
+   SimpleViewGrid,
+   SimpleTree,
+   mListDetails,
+   mLeftListRightDetails,
+   mLeftTreeRightDetails,
+   mLeftListRightList,
+   mBillSingleGrid,
+   mReportBill,
+   mLevelReport,
+   mBirtReport,
+   ListBtnToolbar,
+   mAppendixBoxs,
+   MapBox,
+   PromptMessages,
+   BillOperLog,
+   mFormCardBox,
+   mEditGridCard,
+   mBillAsyncImport,
+   mBillImport,
+   wRichTextBox
+};
+
+const iview = {
+    ...components
+};
+
+const install = function(app, opts = {}) {
+    if (install.installed) return;
+    
+    iviewCoustom.initEview(ViewUI);
+    app.use(ViewUI);
+    Object.keys(iview).forEach(key => {
+        app.component(key, iview[key]);
+    });
+
+
+    /**自定义方法**/
+    app.config.globalProperties.$Method = Method.commonMethod;
+    app.config.globalProperties.$Store = store;
+    app.config.globalProperties.query = Method.query;
+    app.config.globalProperties.BillTemplate = components.BillTemplate;
+    for (let v in Method.caseMethod) {
+        app.config.globalProperties[v] = Method.caseMethod[v];
+    }
+};
+
+// auto install
+if (typeof window !== 'undefined' && window.Vue) {
+    install(window.Vue);
+}
+
+const API = {
+    version: pkg.version, // eslint-disable-line no-undef
+    install,
+    //...ViewUI,
+    ...components
+};
+
+/*API.lang = (code) => {
+    const langObject = window['iview/locale'].default;
+    if (code === langObject.i.locale) locale.use(langObject);
+    else console.log(`The ${code} language pack is not loaded.`); // eslint-disable-line no-console
+};*/
+
+export default API;   // eslint-disable-line no-undef

package/src/locale/format.js

@@ -0,0 +1,51 @@
+/**
+ *  String format template
+ *  - Inspired:
+ *    https://github.com/Matt-Esch/string-template/index.js
+ */
+
+const RE_NARGS = /(%|)\{([0-9a-zA-Z_]+)\}/g;
+
+export default function () {
+    function hasOwn(obj, key) {
+        return Object.prototype.hasOwnProperty.call(obj, key);
+    }
+
+    /**
+     * template
+     *
+     * @param {String} string
+     * @param {Array} ...args
+     * @return {String}
+     */
+
+    function template(string, ...args) {
+        if (args.length === 1 && typeof args[0] === 'object') {
+            args = args[0];
+        }
+
+        if (!args || !args.hasOwnProperty) {
+            args = {};
+        }
+        if (string === undefined) {
+            return '';
+        }
+
+        return string.replace(RE_NARGS, (match, prefix, i, index) => {
+            let result;
+
+            if (string[index - 1] === '{' && string[index + match.length] === '}') {
+                return i;
+            } else {
+                result = hasOwn(args, i) ? args[i] : null;
+                if (result === null || result === undefined) {
+                    return '';
+                }
+
+                return result;
+            }
+        });
+    }
+
+    return template;
+}

package/src/locale/index.js

@@ -0,0 +1,63 @@
+import zhLang from './lang/zh-CN';
+import deepmerge from 'deepmerge';
+import Format from './format';
+
+const format = Format();
+let lang = zhLang;
+const langs = {
+    zh: zhLang
+};
+let nowLang = null;
+let merged = {};
+let vuei18n = null;
+let i18nHandler = function () {
+    if (Reflect.has(this, '$t')) {
+        return this.$t(...arguments);
+    }
+    if (vuei18n && vuei18n.global) {
+        return vuei18n.global.t(...arguments);
+    }
+    if (vuei18n && vuei18n.locale) {
+        if (!merged[vuei18n.locale] || nowLang != vuei18n.locale) {
+            merged[vuei18n.locale] = true;
+            let localMessage = vuei18n.getLocaleMessage(vuei18n.locale) || {};
+            let newLocalMessage = {};
+            deepmerge(newLocalMessage, langs[vuei18n.locale], localMessage, { clone: true })
+            lang = newLocalMessage;
+            vuei18n.setLocaleMessage(vuei18n.locale, newLocalMessage);
+            nowLang = vuei18n.locale;
+        }
+        return vuei18n.hlang(...arguments);
+    }
+};
+
+export const t = function (path, options) {
+    let value = i18nHandler.apply(this, arguments);
+    if (value !== null && value !== undefined) return value;
+
+    const array = path.split('.');
+    let current = lang;
+
+    for (let i = 0, j = array.length; i < j; i++) {
+        const property = array[i];
+        value = current[property];
+        if (i === j - 1) return format(value, options);
+        if (!value) return '';
+        current = value;
+    }
+    return '';
+};
+
+export const use = function (l) {
+    lang = l || lang;
+};
+
+export const i18n = function (initI18n) {
+    vuei18n = initI18n;
+};
+
+export default {
+    use,
+    t,
+    i18n
+};