ocpview-plus 1.3.15 → 1.3.16

package/src/components/radiobox/index.js

@@ -1,2 +1,2 @@
-import RadioGroupBox from './radiogroupbox.vue';
+import RadioGroupBox from './radiogroupbox.vue';
 export default RadioGroupBox;

package/src/components/radiobox/radiogroupbox.vue

@@ -1,76 +1,76 @@
-<template> 
-<div v-show="myConfig.visible" style="white-space: nowrap;">
-    <RadioGroup   ref="myControl"  v-model="value"  :size="myConfig.size"  :style="myConfig.radioStyle" :vertical="myConfig.vertical" :type="myConfig.vtype" @on-change="_setFatherValue">
-        <Radio v-for="(item,index) in myConfig.data" :ref="'myControl_'+ index" :key="'radio_' + index" :label="item[myConfig.valueField]" :disabled="myConfig.readOnly" class="efuture-radiogroupbox-radio">
-            <span >{{item.label}}</span>
-        </Radio>
-    </RadioGroup>
-</div>
-</template>
-<script>
-    import Base from '@/components/base/controlbase.vue';
-    export default {
-        name: 'radiogroupbox',
-        extends: Base,
-        data () {
-            return {
-                myConfig: {
-                    data:[],
-                    valueField: 'code',
-                    textField: 'name',
-                    codeWithName: true ,
-                    defaultValue:'',
-                    vertical:false,
-                    vtype:null,
-                    divStyle:{},
-                    radioStyle:{}
-                }
-            };
-        },
-        methods:{
-            setCustomPro(obj) {
-                if (obj.data !== undefined && obj.data.length > 0) {
-                    obj.data.forEach(el => {
-                        if (this.myConfig.codeWithName) {
-                            el.label = '['+ el[this.myConfig.valueField]+']' + el[this.myConfig.textField];
-                        } else {
-                            el.label =el[this.myConfig.textField];
-                        }
-                    });
-                }
-                return obj;
-            },
-            customInit() {
-                if (this.myConfig.data && this.myConfig.data.length > 0) {
-                    this.myConfig.data.forEach(el => {
-                        if (this.myConfig.codeWithName) {
-                            el.label = '['+ el[this.myConfig.valueField]+']' + el[this.myConfig.textField];
-                        } else {
-                            if (el[this.myConfig.textField]) {
-                                el.label =el[this.myConfig.textField];
-                            } else {
-                                el.label =el[this.myConfig.valueField];
-                            }
-                            
-                        }
-                    });
-                }
-            },
-            setFocus(value) {
-                let index = this.myConfig.data.findIndex(el => el[this.myConfig.valueField] === this.value);
-                if (index ===  -1) {
-                    index = 0;
-                }
-                let name = 'myControl_' + index;
-                if (this.$refs[name] && this.$refs[name][0]) {
-                    if (value) {
-                        this.$refs[name][0].$el.control.focus();
-                    } else {
-                        this.$refs[name][0].$el.control.blur();
-                    } 
-                }
-            }
-           
-        }
-    };
+<template> 
+<div v-show="myConfig.visible" style="white-space: nowrap;">
+    <RadioGroup   ref="myControl"  v-model="value"  :size="myConfig.size"  :style="myConfig.radioStyle" :vertical="myConfig.vertical" :type="myConfig.vtype" @on-change="_setFatherValue">
+        <Radio v-for="(item,index) in myConfig.data" :ref="'myControl_'+ index" :key="'radio_' + index" :label="item[myConfig.valueField]" :disabled="myConfig.readOnly" class="efuture-radiogroupbox-radio">
+            <span >{{item.label}}</span>
+        </Radio>
+    </RadioGroup>
+</div>
+</template>
+<script>
+    import Base from '@/components/base/controlbase.vue';
+    export default {
+        name: 'radiogroupbox',
+        extends: Base,
+        data () {
+            return {
+                myConfig: {
+                    data:[],
+                    valueField: 'code',
+                    textField: 'name',
+                    codeWithName: true ,
+                    defaultValue:'',
+                    vertical:false,
+                    vtype:null,
+                    divStyle:{},
+                    radioStyle:{}
+                }
+            };
+        },
+        methods:{
+            setCustomPro(obj) {
+                if (obj.data !== undefined && obj.data.length > 0) {
+                    obj.data.forEach(el => {
+                        if (this.myConfig.codeWithName) {
+                            el.label = '['+ el[this.myConfig.valueField]+']' + el[this.myConfig.textField];
+                        } else {
+                            el.label =el[this.myConfig.textField];
+                        }
+                    });
+                }
+                return obj;
+            },
+            customInit() {
+                if (this.myConfig.data && this.myConfig.data.length > 0) {
+                    this.myConfig.data.forEach(el => {
+                        if (this.myConfig.codeWithName) {
+                            el.label = '['+ el[this.myConfig.valueField]+']' + el[this.myConfig.textField];
+                        } else {
+                            if (el[this.myConfig.textField]) {
+                                el.label =el[this.myConfig.textField];
+                            } else {
+                                el.label =el[this.myConfig.valueField];
+                            }
+                            
+                        }
+                    });
+                }
+            },
+            setFocus(value) {
+                let index = this.myConfig.data.findIndex(el => el[this.myConfig.valueField] === this.value);
+                if (index ===  -1) {
+                    index = 0;
+                }
+                let name = 'myControl_' + index;
+                if (this.$refs[name] && this.$refs[name][0]) {
+                    if (value) {
+                        this.$refs[name][0].$el.control.focus();
+                    } else {
+                        this.$refs[name][0].$el.control.blur();
+                    } 
+                }
+            }
+           
+        }
+    };
 </script>

package/src/components/richtextbox/editor.vue

@@ -1,150 +1,150 @@
-<template>
-  <div>
-    <QuillEditor ref="myQuillEditor"
-      theme="snow"
-      class="quill-editor customEditor"
-      v-model:content="content"
-      :options="data.editorOption"
-      contentType="html"
-      @update:content="setValue()"
-    />
-  </div>
-</template>
-
-<script setup>
-import { QuillEditor,Quill } from '@vueup/vue-quill'
-import { reactive, onMounted, ref, toRaw, watch,computed  } from 'vue'
-// import { backsite } from '@/api'
-const sizes =[false, '42px', '36px', '26px', '24px', '22px', '18px', '16px','15px', '14px', '12px', '10.5px', '9px', '7.5px','6.5px', '5.5px','5px']
-let fontSizeStyle = Quill.import("attributors/style/size");
-fontSizeStyle.whitelist = sizes;
-Quill.register(fontSizeStyle, true);
-const fonts = [false,'SimSun','KaiTi','FangSong','SimHei','Microsoft-YaHei','PmingLiu','Impact','Georgia','Tahoma','Arial','Verdana']
-var Font = Quill.import("formats/font");
-Font.whitelist = fonts; // 将字体加入到白名单
-Quill.register(Font, true);
-const Embed = Quill.import("blots/embed");
-class DividerBlot extends Embed  {
-    static create(value) {
-      let node = super.create();
-      node.innerHTML = value.text
-      node.setAttribute('contenteditable', false);
-      node.setAttribute('class', 'at-some-one');
-      return node;
-    }
-    static value(node) {
-      return {
-        text: node.innerHTML.trim()
-      };
-    }
- }
-DividerBlot.blotName = 'atusertag';
-DividerBlot.tagName = 'span';
-DividerBlot.className = 'user-at-span';
-Quill.register(DividerBlot);
-
-const titleConfig = [
-                {Choice:'.ql-bold', title:'加粗'},
-                {Choice:'.ql-italic', title:'斜体'},
-                {Choice:'.ql-underline', title:'下划线'},
-                {Choice:'.ql-header', title:'段落格式'},
-                {Choice:'.ql-strike', title:'删除线'},
-                {Choice:'.ql-blockquote', title:'块引用'},
-                {Choice:'.ql-code', title:'插入代码'},
-                {Choice:'.ql-code-block', title:'插入代码段'},
-                // {Choice:'.ql-font', title:'字体'},
-                // {Choice:'.ql-size', title:'字体大小'},
-                {Choice:'.ql-list[value="ordered"]', title:'编号列表'},
-                {Choice:'.ql-list[value="bullet"]', title:'项目列表'},
-                {Choice:'.ql-direction', title:'文本方向'},
-                {Choice:'.ql-header[value="1"]', title:'h1'},
-                {Choice:'.ql-header[value="2"]', title:'h2'},
-                {Choice:'.ql-align', title:'对齐方式'},
-                {Choice:'.ql-color', title:'字体颜色'},
-                {Choice:'.ql-background', title:'背景颜色'},
-                {Choice:'.ql-image', title:'图像'},
-                {Choice:'.ql-video', title:'视频'},
-                {Choice:'.ql-link', title:'添加链接'},
-                {Choice:'.ql-formula', title:'插入公式'},
-                {Choice:'.ql-clean', title:'清除字体格式'},
-                {Choice:'.ql-script[value="sub"]', title:'下标'},
-                {Choice:'.ql-script[value="super"]', title:'上标'},
-                {Choice:'.ql-indent[value="-1"]', title:'向左缩进'},
-                {Choice:'.ql-indent[value="+1"]', title:'向右缩进'},
-                {Choice:'.ql-header .ql-picker-label', title:'标题大小'},
-                {Choice:'.ql-header .ql-picker-item[data-value="1"]', title:'标题一'},
-                {Choice:'.ql-header .ql-picker-item[data-value="2"]', title:'标题二'},
-                {Choice:'.ql-header .ql-picker-item[data-value="3"]', title:'标题三'},
-                {Choice:'.ql-header .ql-picker-item[data-value="4"]', title:'标题四'},
-                {Choice:'.ql-header .ql-picker-item[data-value="5"]', title:'标题五'},
-                {Choice:'.ql-header .ql-picker-item[data-value="6"]', title:'标题六'},
-                {Choice:'.ql-header .ql-picker-item:last-child', title:'标准'},
-                //{Choice:'.ql-size .ql-picker-item[data-value="small"]', title:'小号'},
-                //{Choice:'.ql-size .ql-picker-item[data-value="large"]', title:'大号'},
-                //{Choice:'.ql-size .ql-picker-item[data-value="huge"]', title:'超大号'},
-                //{Choice:'.ql-size .ql-picker-item:nth-child(2)', title:'标准'},
-                {Choice:'.ql-align .ql-picker-item:first-child', title:'居左对齐'},
-                {Choice:'.ql-align .ql-picker-item[data-value="center"]', title:'居中对齐'},
-                {Choice:'.ql-align .ql-picker-item[data-value="right"]', title:'居右对齐'},
-                {Choice:'.ql-align .ql-picker-item[data-value="justify"]', title:'两端对齐'}
-            ]
-
-const props = defineProps(['value','myConfig','toolbarOptions'])
-const emit = defineEmits(['updateValue','imgClick','initQuill'])
-const content = ref('')
-const myQuillEditor = ref()
-watch(() => props.value, (val) => {
-    console.log(toRaw(myQuillEditor.value))
-    const text = toRaw(myQuillEditor.value).getHTML()
-    if (text !== val) {
-        toRaw(myQuillEditor.value).setHTML(val)
-    }
-   })
-const toolbarOptions = computed(() => {
-  return props.toolbarOptions;
-});
-
-
-const fileBtn = ref()
-const data = reactive({
-  content: '',
-  editorOption: {
-    modules: {
-      toolbar: toolbarOptions
-    },
-    placeholder: '请输入内容...'
-  }
-})
-
-const imgHandler = (state) => {
-  if (state) {
-    emit('imgClick', state)
-  }
-}
-const setValue = () => {
-  const text = toRaw(myQuillEditor.value).getHTML()
-  emit('updateValue', text)
-}
-
-onMounted(() => {
-  {
-    if (document.getElementsByClassName('ql-editor') && document.getElementsByClassName('ql-editor').length > 0) {
-        document.getElementsByClassName('ql-editor')[0].dataset.placeholder = '';
-        for (let item of titleConfig) {
-            let tip = document.querySelector('.quill-editor ' + item.Choice);
-            if (!tip) continue;
-            tip.setAttribute('title', item.title);
-        }
-    }
-  }
-  const quill = toRaw(myQuillEditor.value).getQuill()
-  if (myQuillEditor.value) {
-    quill.getModule('toolbar').addHandler('image', imgHandler)
-  }
-  toRaw(myQuillEditor.value).setHTML(props.value)
-  let obj = {};
-  obj.quill = quill;
-  emit('initQuill',obj);
-})
-</script>
-
+<template>
+  <div>
+    <QuillEditor ref="myQuillEditor"
+      theme="snow"
+      class="quill-editor customEditor"
+      v-model:content="content"
+      :options="data.editorOption"
+      contentType="html"
+      @update:content="setValue()"
+    />
+  </div>
+</template>
+
+<script setup>
+import { QuillEditor,Quill } from '@vueup/vue-quill'
+import { reactive, onMounted, ref, toRaw, watch,computed  } from 'vue'
+// import { backsite } from '@/api'
+const sizes =[false, '42px', '36px', '26px', '24px', '22px', '18px', '16px','15px', '14px', '12px', '10.5px', '9px', '7.5px','6.5px', '5.5px','5px']
+let fontSizeStyle = Quill.import("attributors/style/size");
+fontSizeStyle.whitelist = sizes;
+Quill.register(fontSizeStyle, true);
+const fonts = [false,'SimSun','KaiTi','FangSong','SimHei','Microsoft-YaHei','PmingLiu','Impact','Georgia','Tahoma','Arial','Verdana']
+var Font = Quill.import("formats/font");
+Font.whitelist = fonts; // 将字体加入到白名单
+Quill.register(Font, true);
+const Embed = Quill.import("blots/embed");
+class DividerBlot extends Embed  {
+    static create(value) {
+      let node = super.create();
+      node.innerHTML = value.text
+      node.setAttribute('contenteditable', false);
+      node.setAttribute('class', 'at-some-one');
+      return node;
+    }
+    static value(node) {
+      return {
+        text: node.innerHTML.trim()
+      };
+    }
+ }
+DividerBlot.blotName = 'atusertag';
+DividerBlot.tagName = 'span';
+DividerBlot.className = 'user-at-span';
+Quill.register(DividerBlot);
+
+const titleConfig = [
+                {Choice:'.ql-bold', title:'加粗'},
+                {Choice:'.ql-italic', title:'斜体'},
+                {Choice:'.ql-underline', title:'下划线'},
+                {Choice:'.ql-header', title:'段落格式'},
+                {Choice:'.ql-strike', title:'删除线'},
+                {Choice:'.ql-blockquote', title:'块引用'},
+                {Choice:'.ql-code', title:'插入代码'},
+                {Choice:'.ql-code-block', title:'插入代码段'},
+                // {Choice:'.ql-font', title:'字体'},
+                // {Choice:'.ql-size', title:'字体大小'},
+                {Choice:'.ql-list[value="ordered"]', title:'编号列表'},
+                {Choice:'.ql-list[value="bullet"]', title:'项目列表'},
+                {Choice:'.ql-direction', title:'文本方向'},
+                {Choice:'.ql-header[value="1"]', title:'h1'},
+                {Choice:'.ql-header[value="2"]', title:'h2'},
+                {Choice:'.ql-align', title:'对齐方式'},
+                {Choice:'.ql-color', title:'字体颜色'},
+                {Choice:'.ql-background', title:'背景颜色'},
+                {Choice:'.ql-image', title:'图像'},
+                {Choice:'.ql-video', title:'视频'},
+                {Choice:'.ql-link', title:'添加链接'},
+                {Choice:'.ql-formula', title:'插入公式'},
+                {Choice:'.ql-clean', title:'清除字体格式'},
+                {Choice:'.ql-script[value="sub"]', title:'下标'},
+                {Choice:'.ql-script[value="super"]', title:'上标'},
+                {Choice:'.ql-indent[value="-1"]', title:'向左缩进'},
+                {Choice:'.ql-indent[value="+1"]', title:'向右缩进'},
+                {Choice:'.ql-header .ql-picker-label', title:'标题大小'},
+                {Choice:'.ql-header .ql-picker-item[data-value="1"]', title:'标题一'},
+                {Choice:'.ql-header .ql-picker-item[data-value="2"]', title:'标题二'},
+                {Choice:'.ql-header .ql-picker-item[data-value="3"]', title:'标题三'},
+                {Choice:'.ql-header .ql-picker-item[data-value="4"]', title:'标题四'},
+                {Choice:'.ql-header .ql-picker-item[data-value="5"]', title:'标题五'},
+                {Choice:'.ql-header .ql-picker-item[data-value="6"]', title:'标题六'},
+                {Choice:'.ql-header .ql-picker-item:last-child', title:'标准'},
+                //{Choice:'.ql-size .ql-picker-item[data-value="small"]', title:'小号'},
+                //{Choice:'.ql-size .ql-picker-item[data-value="large"]', title:'大号'},
+                //{Choice:'.ql-size .ql-picker-item[data-value="huge"]', title:'超大号'},
+                //{Choice:'.ql-size .ql-picker-item:nth-child(2)', title:'标准'},
+                {Choice:'.ql-align .ql-picker-item:first-child', title:'居左对齐'},
+                {Choice:'.ql-align .ql-picker-item[data-value="center"]', title:'居中对齐'},
+                {Choice:'.ql-align .ql-picker-item[data-value="right"]', title:'居右对齐'},
+                {Choice:'.ql-align .ql-picker-item[data-value="justify"]', title:'两端对齐'}
+            ]
+
+const props = defineProps(['value','myConfig','toolbarOptions'])
+const emit = defineEmits(['updateValue','imgClick','initQuill'])
+const content = ref('')
+const myQuillEditor = ref()
+watch(() => props.value, (val) => {
+    console.log(toRaw(myQuillEditor.value))
+    const text = toRaw(myQuillEditor.value).getHTML()
+    if (text !== val) {
+        toRaw(myQuillEditor.value).setHTML(val)
+    }
+   })
+const toolbarOptions = computed(() => {
+  return props.toolbarOptions;
+});
+
+
+const fileBtn = ref()
+const data = reactive({
+  content: '',
+  editorOption: {
+    modules: {
+      toolbar: toolbarOptions
+    },
+    placeholder: '请输入内容...'
+  }
+})
+
+const imgHandler = (state) => {
+  if (state) {
+    emit('imgClick', state)
+  }
+}
+const setValue = () => {
+  const text = toRaw(myQuillEditor.value).getHTML()
+  emit('updateValue', text)
+}
+
+onMounted(() => {
+  {
+    if (document.getElementsByClassName('ql-editor') && document.getElementsByClassName('ql-editor').length > 0) {
+        document.getElementsByClassName('ql-editor')[0].dataset.placeholder = '';
+        for (let item of titleConfig) {
+            let tip = document.querySelector('.quill-editor ' + item.Choice);
+            if (!tip) continue;
+            tip.setAttribute('title', item.title);
+        }
+    }
+  }
+  const quill = toRaw(myQuillEditor.value).getQuill()
+  if (myQuillEditor.value) {
+    quill.getModule('toolbar').addHandler('image', imgHandler)
+  }
+  toRaw(myQuillEditor.value).setHTML(props.value)
+  let obj = {};
+  obj.quill = quill;
+  emit('initQuill',obj);
+})
+</script>
+

package/src/components/richtextbox/index.js

@@ -1,2 +1,2 @@
-import RichTextBox from './richtextbox.vue';
+import RichTextBox from './richtextbox.vue';
 export default RichTextBox;