@bdsoft/element 1.1.0

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

@@ -0,0 +1,349 @@
+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

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

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

@@ -0,0 +1,66 @@
+._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

@@ -0,0 +1,17 @@
+{
+  "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"
+  }
+}