@bdsoft/element 1.1.8 → 1.1.11

package/package-form/element-form/components/frame/src/component.jsx

@@ -1,349 +0,0 @@
-import toArray from '@bdsoft-element/utils/lib/toarray';
-import Mitt from '@bdsoft-element/utils/lib/mitt';
-import {defineComponent, nextTick, resolveComponent} from 'vue';
-import './style.css';
-import IconCircleClose from './IconCircleClose.vue';
-import IconDocument from './IconDocument.vue';
-import IconDelete from './IconDelete.vue';
-import IconView from './IconView.vue';
-import IconFolderOpened from './IconFolderOpened.vue';
-
-const NAME = 'fcFrame';
-
-export default defineComponent({
-    name: NAME,
-    props: {
-        type: {
-            type: String,
-            default: 'input'
-        },
-        field: String,
-        helper: {
-            type: Boolean,
-            default: true
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        src: {
-            type: String,
-            required: true
-        },
-        icon: {
-            type: String,
-            default: 'IconFolderOpened'
-        },
-        width: {
-            type: String,
-            default: '500px'
-        },
-        height: {
-            type: String,
-            default: '370px'
-        },
-        maxLength: {
-            type: Number,
-            default: 0
-        },
-        okBtnText: {
-            type: String,
-            default: ''
-        },
-        closeBtnText: {
-            type: String,
-            default: ''
-        },
-        modalTitle: String,
-        handleIcon: {
-            type: [String, Boolean],
-            default: undefined,
-        },
-        title: String,
-        allowRemove: {
-            type: Boolean,
-            default: true
-        },
-        onOpen: {
-            type: Function,
-            default: () => {
-            }
-        },
-        onOk: {
-            type: Function,
-            default: () => {
-            }
-        },
-        onCancel: {
-            type: Function,
-            default: () => {
-            }
-        },
-        onLoad: {
-            type: Function,
-            default: () => {
-            }
-        },
-        onBeforeRemove: {
-            type: Function,
-            default: () => {
-            }
-        },
-        onRemove: {
-            type: Function,
-            default: () => {
-            }
-        },
-        onHandle: Function,
-        modal: {
-            type: Object,
-            default: () => ({})
-        },
-        srcKey: [String, Number],
-        modelValue: [Array, String, Number, Object],
-        previewMask: undefined,
-        footer: {
-            type: Boolean,
-            default: true
-        },
-        reload: {
-            type: Boolean,
-            default: true
-        },
-        closeBtn: {
-            type: Boolean,
-            default: true
-        },
-        okBtn: {
-            type: Boolean,
-            default: true
-        },
-        formCreateInject: Object,
-    },
-    emits: ['update:modelValue', 'change'],
-    components: {
-        IconFolderOpened,
-        IconView,
-    },
-    data() {
-        return {
-            fileList: toArray(this.modelValue),
-            previewVisible: false,
-            frameVisible: false,
-            previewImage: '',
-            bus: new Mitt()
-        }
-    },
-    watch: {
-        modelValue(n) {
-            this.fileList = toArray(n);
-        }
-    },
-    methods: {
-        close() {
-            this.closeModel(true);
-        },
-        closeModel(close) {
-            this.bus.$emit(close ? '$close' : '$ok');
-            if (this.reload) {
-                this.bus.$off('$ok');
-                this.bus.$off('$close');
-            }
-            this.frameVisible = false;
-        },
-        handleCancel() {
-            this.previewVisible = false;
-        },
-
-        showModel() {
-            if (this.disabled || false === this.onOpen()) {
-                return;
-            }
-            this.frameVisible = true;
-        },
-        input() {
-            const n = this.fileList;
-            const val = this.maxLength === 1 ? (n[0] || '') : n;
-            this.$emit('update:modelValue', val);
-            this.$emit('change', val);
-        },
-        makeInput() {
-            return <ElInput {...{
-                type: 'text',
-                modelValue: (this.fileList.map(v => this.getSrc(v))).toString(),
-                readonly: true
-            }} key={1} v-slots={{
-                append: () => <ElButton icon={resolveComponent(this.icon)} onClick={() => this.showModel()}/>,
-                suffix: () => this.fileList.length && !this.disabled ?
-                    <ElIcon class="el-input__icon _fc-upload-icon" onClick={() => {
-                        this.fileList = [];
-                        this.input();
-                    }}>
-                        <IconCircleClose/>
-                    </ElIcon> : null
-            }}/>
-        },
-        makeGroup(children) {
-            if (!this.maxLength || this.fileList.length < this.maxLength) {
-                children.push(this.makeBtn());
-            }
-            return <div key={2}>{children}</div>
-        },
-
-        makeItem(index, children) {
-            return <div class="_fc-files" key={'3' + index}>{children}</div>;
-        },
-        valid(f) {
-            const field = this.formCreateInject.field || this.field;
-            if (field && f !== field) {
-                throw new Error('[frame]无效的字段值');
-            }
-        },
-        makeIcons(val, index) {
-            if (this.handleIcon !== false || this.allowRemove === true) {
-                const icons = [];
-                if ((this.type !== 'file' && this.handleIcon !== false) || (this.type === 'file' && this.handleIcon)) {
-                    icons.push(this.makeHandleIcon(val, index));
-                }
-                if (this.allowRemove) {
-                    icons.push(this.makeRemoveIcon(val, index));
-                }
-                return <div class="_fc-upload-cover" key={4}>{icons}</div>
-            }
-        },
-        makeHandleIcon(val, index) {
-            const Type = resolveComponent((this.handleIcon === true || this.handleIcon === undefined) ? 'icon-view' : this.handleIcon);
-            return <ElIcon onClick={() => this.handleClick(val)} key={'5' + index}><Type/></ElIcon>
-        },
-
-        makeRemoveIcon(val, index) {
-            return <ElIcon onClick={() => this.handleRemove(val)} key={'6' + index}>
-                <IconDelete/>
-            </ElIcon>
-        },
-
-        makeFiles() {
-            return this.makeGroup(this.fileList.map((src, index) => {
-                return this.makeItem(index, [<ElIcon onClick={() => this.handleClick(src)}>
-                    <IconDocument/>
-                </ElIcon>, this.makeIcons(src, index)])
-            }))
-        },
-        makeImages() {
-            return this.makeGroup(this.fileList.map((src, index) => {
-                return this.makeItem(index, [<img src={this.getSrc(src)}/>, this.makeIcons(src, index)])
-            }))
-        },
-        makeBtn() {
-            const Type = resolveComponent(this.icon);
-            return <div class="_fc-upload-btn" onClick={() => this.showModel()} key={7}>
-                <ElIcon><Type/></ElIcon>
-            </div>
-        },
-        handleClick(src) {
-            if (this.onHandle) {
-                return this.onHandle(src);
-            } else {
-                this.previewImage = this.getSrc(src);
-                this.previewVisible = true;
-            }
-        },
-        handleRemove(src) {
-            if (this.disabled) {
-                return;
-            }
-            if (false !== this.onBeforeRemove(src)) {
-                this.fileList.splice(this.fileList.indexOf(src), 1);
-                this.input();
-                this.onRemove(src);
-            }
-        },
-        getSrc(src) {
-            return !this.srcKey ? src : src[this.srcKey];
-        },
-        frameLoad(iframe) {
-            this.onLoad(iframe);
-            try {
-                if (this.helper === true) {
-                    iframe['form_create_helper'] = {
-                        api: this.formCreateInject.api,
-                        close: (field) => {
-                            this.valid(field);
-                            this.closeModel();
-                        },
-                        set: (field, value) => {
-                            this.valid(field);
-                            !this.disabled && this.$emit('update:modelValue', value);
-                        },
-                        get: (field) => {
-                            this.valid(field);
-                            return this.modelValue;
-                        },
-                        onOk: fn => this.bus.$on('$ok', fn),
-                        onClose: fn => this.bus.$on('$close', fn)
-                    };
-
-                }
-            } catch (e) {
-                console.error(e);
-            }
-        },
-        makeFooter() {
-            const {okBtnText, closeBtnText, closeBtn, okBtn, footer} = this.$props;
-
-            if (!footer) {
-                return;
-            }
-            return <div>
-                {closeBtn ? <ElButton
-                    onClick={() => (this.onCancel() !== false && (this.frameVisible = false))}>{closeBtnText || this.formCreateInject.t('close') || '关闭'}</ElButton> : null}
-                {okBtn ? <ElButton type="primary"
-                    onClick={() => (this.onOk() !== false && this.closeModel())}>{okBtnText || this.formCreateInject.t('ok') || '确定'}</ElButton> : null}
-            </div>
-        }
-    },
-    render() {
-        const type = this.type;
-
-        let node;
-        if (type === 'input') {
-            node = this.makeInput();
-        } else if (type === 'image') {
-            node = this.makeImages();
-        } else {
-            node = this.makeFiles();
-        }
-
-        const {width = '30%', height, src, title, modalTitle} = this.$props;
-        nextTick(() => {
-            if (this.$refs.frame) {
-                this.frameLoad(this.$refs.frame.contentWindow || {});
-            }
-        });
-        return <div class={{'_fc-frame': true, '_fc-disabled': this.disabled}}>{node}
-            <ElDialog appendToBody={true} modal={this.previewMask} title={modalTitle} modelValue={this.previewVisible}
-                onClose={this.handleCancel}>
-                <img style="width: 100%" src={this.previewImage}/>
-            </ElDialog>
-            <ElDialog appendToBody={true} {...{width, title, ...this.modal}} modelValue={this.frameVisible}
-                onClose={() => (this.closeModel(true))} v-slots={{
-                    footer: () => this.makeFooter()
-                }}>
-                {(this.frameVisible || !this.reload) ? <iframe ref="frame" src={src} frameBorder="0" style={{
-                    height,
-                    'border': '0 none',
-                    'width': '100%'
-                }}/> : null}</ElDialog>
-        </div>
-    },
-    beforeMount() {
-        const {name, field, api} = this.formCreateInject;
-        name && api.on('fc:closeModal:' + name, this.close);
-        field && api.on('fc:closeModal:' + field, this.close);
-    },
-    beforeUnmount() {
-        const {name, field, api} = this.formCreateInject;
-        name && api.off('fc:closeModal:' + name, this.close);
-        field && api.off('fc:closeModal:' + field, this.close);
-    }
-})

package/package-form/element-form/components/frame/src/index.js

@@ -1,3 +0,0 @@
-import Frame from './component';
-
-export default Frame;

package/package-form/element-form/components/frame/src/style.css

@@ -1,66 +0,0 @@
-._fc-frame ._fc-files img {
-    width: 100%;
-    height: 100%;
-    display: inline-block;
-    vertical-align: top;
-}
-
-._fc-frame ._fc-upload-btn {
-    border: 1px dashed #c0ccda;
-    cursor: pointer;
-}
-
-._fc-frame._fc-disabled ._fc-upload-btn ,._fc-frame._fc-disabled .el-button {
-    cursor: not-allowed !important;
-    color: #999;
-}
-
-._fc-frame ._fc-upload-cover {
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: rgba(0, 0, 0, .6);
-    -webkit-transition: opacity .3s;
-    -o-transition: opacity .3s;
-    transition: opacity .3s;
-}
-
-._fc-frame ._fc-upload-cover i {
-    color: #fff;
-    font-size: 20px;
-    cursor: pointer;
-    margin: 0 2px;
-}
-
-._fc-frame ._fc-files:hover ._fc-upload-cover {
-    opacity: 1;
-}
-
-._fc-frame .el-upload {
-    display: block;
-}
-
-._fc-frame ._fc-upload-icon {
-    cursor: pointer;
-}
-
-._fc-frame ._fc-upload-btn, ._fc-files {
-    display: inline-block;
-    width: 58px;
-    height: 58px;
-    text-align: center;
-    line-height: 58px;
-    border: 1px solid #c0ccda;
-    border-radius: 4px;
-    overflow: hidden;
-    background: #fff;
-    position: relative;
-    -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, .1);
-    box-shadow: 2px 2px 5px rgba(0, 0, 0, .1);
-    margin-right: 4px;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}

package/package-form/element-form/components/group/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "@bdsoft-element/form-group",
-  "version": "0.0.1",
-  "description": "",
-  "main": "./dist/index.min.js",
-  "module": "./dist/index.esm.js",
-  "unpkg": "./dist/index.min.js",
-  "jsdelivr": "./dist/index.min.js",
-  "scripts": {
-    "clean": "rimraf dist/",
-    "bili": "cross-env bili",
-    "build": "npm-run-all clean bili"
-  },
-  "dependencies": {
-    "@bdsoft-element/utils": "workspace:^1.0.1"
-  }
-}