caimei365-www/src/main/resources/static/js/supplier-center/encyclopedia/form-component.js

'use strict';

function _toConsumableArray(arr) {
    if (Array.isArray(arr)) {
        for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
            arr2[i] = arr[i];
        }
        return arr2;
    } else {
        return Array.from(arr);
    }
}

// 查找html元素
function queryElement(el) {
    return document.querySelector(el);
}

// 返回模板字符串
function templateHtml(el) {
    return queryElement(el).innerHTML;
}

// Radio组件
function createnRadio() {
    var Radio = {
        template: templateHtml('#radio'),
        model: {
            prop: 'value',
            event: 'click'
        },
        props: {
            label: {
                type: [Number, String],
                default: ''
            },
            value: {
                type: [Number, String],
                default: ''
            }
        },
        computed: {
            isChecked: function isChecked() {
                return this.value === this.label;
            }
        },
        methods: {
            handleClick: function handleClick() {
                this.$emit('click', this.label);
            }
        }
    };
    return Radio;
}

// Select组件
function createSelect() {
    var Select = {
        template: templateHtml('#select'),
        props: {
            value: {
                type: [Number, String],
                default: ''
            },
            placeholder: {
                type: String,
                default: ''
            }
        },
        model: {
            prop: 'value',
            event: 'change'
        },
        data: function data() {
            return {
                optionsVisible: false,
                label: '',
            };
        },
        watch:{
            value(nVal){
                const that = this;
                this.$children.forEach(function(o){
                    if(o.value === nVal){
                        that.label = o.label
                    }
                });
            },
        },
        mounted: function mounted() {
            var _this = this;

            document.addEventListener('click', function () {
                _this.optionsVisible = false;
            });
        },
        beforeDestroy: function beforeDestroy() {
            document.removeEventListener('click');
        }
    };
    return Select;
}

// Option组件
function createOption() {
    var Option = {
        template: templateHtml('#option'),
        props: {
            label: {
                type: [String, Number],
                default: ''
            },
            value: {
                type: [String, Number],
                default: ''
            }
        },
        methods: {
            handleClick: function handleClick() {
                this.$parent.$emit('change', this.value);
                this.$parent.$data.optionsVisible = false;
                // this.$parent.$data.label = this.label;
            }
        }
    };
    return Option;
}

// 上传文件组件
function createUploadImage() {
    var UploadImage = {
        template: templateHtml('#imageUpload'),
        props: {
            placeholder: {
                type: String,
                default: '上传图片'
            },
            multiple: {
                type: Boolean,
                default: false
            },
            limit: {
                type: Number,
                default: 9
            },
            imgList: {
                type: Array,
                default: function _default() {
                    return [];
                }
            }
        },
        data: function data() {
            return {
                files: [],
                accept: '.jpg, .jpeg, .png, .gif',
            };
        },
        created: function created() {
            // 初始化列表
            this.initImagelist(this.imgList);
        },
        computed: {
            // 当前选中的图片数量
            fileCount: function fileCount() {
                return this.files.length;
            },
            // 是否能选择图片
            canChooseImage: function canChooseImage() {
                return (this.multiple && this.fileCount < this.limit) || (!this.multiple && this.fileCount === 0);
            }
        },
        watch: {
            imgList: function(nVal){
                this.initImagelist(nVal)
            }
        },

        methods: {

            // 初始化图片列表
            initImagelist: function initImagelist(fileList = []){
                if(fileList.length <=0) return;
                this.files = [];
                if(this.multiple){
                    this.files = fileList.slice(0, this.limit);
                }else{
                    this.files.push(fileList[0]);
                }
            },

            // 点击事件
            handleClick: function handleClick() {
                this.$refs.file.click();
            },

            // 选择图片
            handleChooseImage: function handleChooseImage(e) {
                var that = this;
                var files = [].concat(_toConsumableArray(e.target.files));
                e.target.value = '';
                // 如果能选取图片
                if(!this.canChooseImage) return;
                // 取合适数量的图片
                files = this.handleFilterImage(files);
                // 图片本地预览链接
                files.forEach(function(file){
                    file.url = URL.createObjectURL(file);
                    that.files.push(file);
                });
                this.$emit('change', this.files);
            },

            // 筛选图片 单张 ||  limit张
            handleFilterImage: function handleFilterImage(files) {
                if(files.length <= 0) return [];
                if(this.multiple){
                    console.log(this.limit - this.fileCount);
                    // 多选
                    files = files.slice(0, this.limit - this.fileCount)
                }else{
                    // 单选
                    files = files.slice(0, 1)
                }
                return files
            },

            // 删除图片
            removeImage: function removeImage(file, index) {
                this.files.splice(index, 1);
                this.$emit('remove', index);
            }
        }
    };
    return UploadImage;
}

//富文本框封装
function createEditorComponent() {
    window.editorCount = 0;
    const Editor = {
        render: function render(h){
            return h('div', { class: { 'cm': true, 'editor': true }, attrs: { id: this.editorId } })
        },
        model: {
            prop: 'value',
            event: 'change'
        },
        props:{
            value: {
                type: String,
                default: ''
            },
            placeholder:{
                type: String,
                default: ''
            },
            text: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                editorId: '',
                editor: null
            }
        },
        watch:{
            text(nVal){
                if(!this.editor) return;
                this.editor.txt.html(this.value) // 重新设置编辑器内容
            }
        },
        created: function created() {
            window.editorCount++;
            this.editorId = 'editorId-' + window.editorCount;
        },
        mounted: function mounted() {
            this.createEditor();
        },
        beforeDestroy: function beforeDestroy(){
            this.editor.destroy();
            this.editor = null;
        },
        methods: {
            // 创建编辑器
            createEditor: function createEditor() {
                const E = window.wangEditor;
                this.editor = new E('#' + this.editorId);
                // 或者 const editor = new E( document.getElementById('div1') )
                this.initEditorOptions();
                this.editor.create();
            },
            // 富文本框配置
            initEditorOptions: function initEditorOptions() {
                this.editor.config.zIndex = 333;
                this.editor.config.height = 200;
                this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024;
                this.editor.config.uploadImgMaxLength = 5; // 一次最多上传 5 个图片
                this.editor.config.placeholder = this.placeholder;
                var that = this;
                this.editor.config.onchange = function (newHtml) {
                    that.$emit('change', newHtml)
                };

                this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
                    resultFiles.forEach(function (file) {
                        // resultFiles 是 input 中选中的文件列表
                        // insertImgFn 是获取图片 url 后，插入到编辑器的方法
                        that.uploadImage(file).then(function (res) {
                            insertImgFn(res);
                        });
                    });
                };
            },
            // 上传图片
            uploadImage: function uploadImage(file) {
                var formData = new FormData();
                formData.append('file', file);
                return new Promise(function (resolve, reject) {
                    PublicApi.uploadimg(formData, function (res) {
                        if (res.code === 0) {
                            resolve(res.data);
                        }
                        reject();
                    });
                });
            }
        }
    };
    return Editor;
}

// 文本框列表
function  createInputGroup() {
    const InputGroup = {
        template: templateHtml('#inputGroup'),
        props:{
            // 最小数量
            minLimit: {
                type: Number,
                default: 5
            },
            // 回显列表
            list: {
                type: Array,
                default: function _default() {
                    return [];
                }
            },
            placeholderList: {
                type: Array,
                default: function _default() {
                    return [];
                }
            },
            keyMap: {
                type: Object,
                default: () => ({
                    key: 'name',
                    value: 'value'
                })
            },
            addText:{
                type: String,
                default: ''
            }
        },
        data: function(){
            return {
                dataList: [],
                placeholder: { label: '参数名',value: '请输入参数信息'},
            }
        },
        computed:{
            showList: function(){
                const len = this.dataList.length;
                if(len >= this.minLimit) return this.dataList;
                const emptyList = this.setEmptyData(this.minLimit - len);
                return this.dataList.concat(emptyList);
            }
        },
        created: function(){
            this.dataList = this.list;
        },
        watch:{
            list: function(nVal){
                this.dataList = nVal;
            }
        },
        methods:{
            // add
            getPlaceholder(index){
                if(this.placeholderList.length <= 0) return this.placeholder;
                return this.placeholderList[index] || this.placeholder;
            },
            //添加空数据
            setEmptyData(size) {
                const list = [];
                for (let i = 0; i < size; i++) {
                    let obj = Object.create(null);
                    obj[this.keyMap.key] = "";
                    obj[this.keyMap.value] = '';
                    list.push(obj)
                }
                return list
            },
            handleRemove(item, index){
                this.$emit('remove', { item, index});
            },
            handleAddOnce(){
                this.$emit('add')
            }
        }
    };
    return InputGroup;
}

// 问答组件
function createQuestionGroup(){
    const QuestionGroup = {
        template: templateHtml('#questionGroup'),
        props:{
            // 最小数量
            minLimit: {
                type: Number,
                default: 5
            },
            // 回显列表
            list: {
                type: Array,
                default: function _default() {
                    return [];
                }
            },
            placeholderList: {
                type: Array,
                default: function _default() {
                    return [];
                }
            },
            keyMap: {
                type: Object,
                default: () => ({
                    key: 'name',
                    value: 'value'
                })
            },
            addText:{
                type: String,
                default: ''
            }
        },
        data: function(){
            return {
                dataList: [],
                placeholder: { label: '请输入问题',value: '请输入回答'},
            }
        },
        computed:{
            showList: function(){
                const len = this.dataList.length;
                if(len >= this.minLimit) return this.dataList;
                const emptyList = this.setEmptyData(this.minLimit - len);
                return this.dataList.concat(emptyList);
            }
        },
        created: function(){
            this.dataList = this.list;
        },
        watch:{
            list: function(nVal){
                this.dataList = nVal;
            }
        },
        methods:{
            // add
            getPlaceholder(index){
                if(this.placeholderList.length <= 0) return this.placeholder;
                return this.placeholderList[index] || this.placeholder;
            },
            //添加空数据
            setEmptyData(size) {
                const list = [];
                for (let i = 0; i < size; i++) {
                    let obj = Object.create(null);
                    obj[this.keyMap.key] = "";
                    obj[this.keyMap.value] = '';
                    list.push(obj)
                }
                return list
            },
            handleRemove(item){
                this.$emit('remove', item);
            },
            handleAddOnce(){
                this.$emit('add')
            }
        }
    };
    return QuestionGroup;
}