@bdsoft/element 1.1.0

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

@@ -0,0 +1,76 @@
+import {defineComponent, reactive, markRaw, nextTick} from 'vue';
+
+const NAME = 'fcSubForm';
+
+
+export default defineComponent({
+    name: NAME,
+    props: {
+        rule: Array,
+        options: {
+            type: Object,
+            default: () => reactive(({
+                submitBtn: false,
+                resetBtn: false,
+            }))
+        },
+        modelValue: {
+            type: Object,
+            default: () => ({})
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        syncDisabled: {
+            type: Boolean,
+            default: true
+        },
+        formCreateInject: Object,
+    },
+    data() {
+        return {
+            cacheValue: {},
+            subApi: {},
+            form: markRaw(this.formCreateInject.form.$form())
+        }
+    },
+    emits: ['fc:subform', 'update:modelValue', 'change', 'itemMounted'],
+    watch: {
+        modelValue(n) {
+            this.setValue(n);
+        }
+    },
+    methods: {
+        formData(value) {
+            this.cacheValue = JSON.stringify(value);
+            this.$emit('update:modelValue', value);
+            this.$emit('change', value);
+        },
+        setValue(value) {
+            const str = JSON.stringify(value);
+            if (this.cacheValue === str) {
+                return;
+            }
+            this.cacheValue = str;
+            this.subApi.coverValue(value || {});
+        },
+        add$f(api) {
+            this.subApi = api;
+            nextTick(() => {
+                this.$emit('itemMounted', api);
+            });
+        }
+    },
+    render() {
+        const Type = this.form;
+        return <Type
+            disabled={this.disabled}
+            onUpdate:modelValue={this.formData}
+            modelValue={this.modelValue}
+            onEmit-event={this.$emit}
+            onUpdate:api={this.add$f}
+            rule={this.rule}
+            option={this.options} extendOption={true}/>
+    }
+})

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

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

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

@@ -0,0 +1,17 @@
+{
+  "name": "@bdsoft-element/form-tree",
+  "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"
+  }
+}

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

@@ -0,0 +1,62 @@
+import {defineComponent} from 'vue';
+import toArray from '@bdsoft-element/utils/lib/toarray';
+
+const NAME = 'fcTree';
+
+export default defineComponent({
+    name: NAME,
+    inheritAttrs: false,
+    formCreateParser: {
+        mergeProp(ctx) {
+            const props = ctx.prop.props;
+            if (!props.nodeKey) props.nodeKey = 'id';
+            if (!props.props) props.props = {
+                label: 'title'
+            };
+        }
+    },
+    props: {
+        type: String,
+        modelValue: {
+            type: [Array, String, Number],
+            default: () => ([])
+        }
+    },
+    emits: ['update:modelValue', 'fc.el'],
+    watch: {
+        modelValue() {
+            this.setValue();
+        }
+    },
+    methods: {
+        updateValue() {
+            if (!this.$refs.tree) return;
+            let value;
+            if (this.type === 'selected') {
+                value = this.$refs.tree.getCurrentKey();
+            } else {
+                value = this.$refs.tree.getCheckedKeys();
+            }
+            this.$emit('update:modelValue', value);
+        },
+        setValue() {
+            if (!this.$refs.tree) return;
+            const type = this.type;
+
+            if (type === 'selected') {
+                this.$refs.tree.setCurrentKey(this.modelValue);
+            } else {
+                this.$refs.tree.setCheckedKeys(toArray(this.modelValue));
+            }
+        }
+    },
+    render() {
+        return <ElTree {...this.$attrs} ref="tree" onCheck={this.updateValue}
+            onNodeClick={this.updateValue}
+            v-slots={this.$slots}/>;
+    },
+    mounted() {
+        this.setValue();
+        this.$emit('fc.el',this.$refs.tree);
+    }
+});

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

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

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

@@ -0,0 +1,17 @@
+{
+  "name": "@bdsoft-element/form-upload",
+  "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"
+  }
+}

package/package-form/element-form/components/upload/src/IconUpload.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor"
+          d="M160 832h704a32 32 0 110 64H160a32 32 0 110-64zm384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248L544 253.696z"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'IconUpload'
+}
+</script>

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

@@ -0,0 +1,129 @@
+import toArray from '@bdsoft-element/utils/lib/toarray';
+import getSlot from '@bdsoft-element/utils/lib/slot';
+import './style.css';
+import {defineComponent} from 'vue';
+import IconUpload from './IconUpload.vue';
+
+function parseFile(file, i) {
+    if (typeof file === 'object') {
+        return file;
+    }
+    return {
+        url: file,
+        is_string: true,
+        name: getFileName(file),
+        uid: i
+    };
+}
+
+function parseUpload(file) {
+    return {...file, file, value: file};
+}
+
+function getFileName(file) {
+    return ('' + file).split('/').pop()
+}
+
+const NAME = 'fcUpload';
+
+export default defineComponent({
+    name: NAME,
+    inheritAttrs: false,
+    formCreateParser: {
+        toFormValue(value) {
+            return toArray(value);
+        },
+        toValue(formValue, ctx) {
+            return ctx.prop.props.limit === 1 ? (formValue[0] || '') : formValue;
+        }
+    },
+    props: {
+        previewMask: undefined,
+        onPreview: Function,
+        httpRequest: Function,
+        modalTitle: String,
+        listType: String,
+        formCreateInject: Object,
+        modelValue: [Array, String, Object]
+    },
+    emits: ['update:modelValue', 'change', 'remove', 'fc.el'],
+    data() {
+        return {
+            previewVisible: false,
+            previewImage: '',
+            fileList: [],
+        }
+    },
+    created() {
+        this.fileList = toArray(this.modelValue).map(parseFile).map(parseUpload);
+    },
+    watch: {
+        modelValue(n) {
+            this.fileList = toArray(n).map(parseFile).map(parseUpload);
+        }
+    },
+    methods: {
+        handlePreview(file) {
+            if (this.onPreview) {
+                this.onPreview(...arguments);
+            } else {
+                if ('text' === this.listType) {
+                    window.open(file.url);
+                } else {
+                    this.previewImage = file.url;
+                    this.previewVisible = true;
+                }
+            }
+        },
+        update(fileList) {
+            let files = fileList.map((v) => v.is_string ? v.url : (v.value || v.url)).filter((url) => url !== undefined);
+            this.$emit('update:modelValue', files);
+        },
+        handleCancel() {
+            this.previewVisible = false;
+        },
+        handleChange(file, fileList) {
+            this.$emit('change', ...arguments);
+            if (file.status === 'success') {
+                this.update(fileList);
+            }
+        },
+        handleRemove(file, fileList) {
+            this.$emit('remove', ...arguments);
+            this.update(fileList);
+        },
+        doHttpRequest(option) {
+            if (this.httpRequest) {
+                return this.httpRequest(option);
+            } else {
+                option.source = 'upload';
+                this.formCreateInject.api.fetch(option);
+            }
+        },
+    },
+    render() {
+        const len = toArray(this.modelValue).length;
+        return (
+            <div class="_fc-upload"><ElUpload key={len} {...this.$attrs} listType={this.listType || 'picture-card'}
+                class={{'_fc-exceed': this.$attrs.limit ? this.$attrs.limit <= len : false}}
+                onPreview={this.handlePreview} onChange={this.handleChange}
+                onRemove={this.handleRemove} httpRequest={this.doHttpRequest}
+                fileList={this.fileList}
+                v-slots={getSlot(this.$slots, ['default'])} ref="upload">
+                {((this.$slots.default?.()) ||
+                    (['text', 'picture'].indexOf(this.listType) === -1 ? <ElIcon>
+                        <IconUpload/>
+                    </ElIcon> : <ElButton type="primary">{this.formCreateInject.t('clickToUpload') || '点击上传'}</ElButton>)
+                )}
+            </ElUpload>
+            <ElDialog appendToBody={true} modal={this.previewMask} title={this.modalTitle}
+                modelValue={this.previewVisible}
+                onClose={this.handleCancel}>
+                <img style="width: 100%" src={this.previewImage}/>
+            </ElDialog>
+            </div>);
+    },
+    mounted() {
+        this.$emit('fc.el', this.$refs.upload);
+    }
+})

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

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

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

@@ -0,0 +1,11 @@
+._fc-upload{
+    width: 100%;
+}
+
+._fc-exceed .el-upload {
+    display: none;
+}
+
+.el-upload-list.is-disabled .el-upload {
+    cursor: not-allowed !important;
+}

package/package-form/element-form/index.js

@@ -0,0 +1,8 @@
+import elmFormCreate from './src/core/index';
+
+const FormNew = elmFormCreate();
+
+if (typeof window !== 'undefined') {
+    window.FormNew = FormNew;
+}
+export default FormNew;

package/package-form/element-form/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@bdsoft/element-form",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@bdsoft-element/formcore": "workspace:^",
+    "@bdsoft-element/utils": "workspace:^1.0.1"
+  }
+}

package/package-form/element-form/src/components/icon/IconWarning.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor"
+          d="M512 64a448 448 0 110 896 448 448 0 010-896zm0 832a384 384 0 000-768 384 384 0 000 768zm48-176a48 48 0 11-96 0 48 48 0 0196 0zm-48-464a32 32 0 0132 32v288a32 32 0 01-64 0V288a32 32 0 0132-32z"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'IconWarning'
+}
+</script>

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

@@ -0,0 +1,22 @@
+import checkbox from '../../components/checkbox/src/index';
+import frame from '../../components/frame/src/index';
+import radio from '../../components/radio/src/index';
+import select from '../../components/select/src/index';
+import tree from '../../components/tree/src/index';
+import upload from '../../components/upload/src/index';
+import group from '../../components/group/src/index';
+// import subForm from '../../components/subform/src/index';
+import IconWarning from './icon/IconWarning.vue';
+
+
+export default [
+    checkbox,
+    frame,
+    radio,
+    select,
+    tree,
+    upload,
+    group,
+    // subForm,
+    IconWarning,
+]

package/package-form/element-form/src/core/alias.js

@@ -0,0 +1,34 @@
+const PRE = 'el';
+export default {
+    button: PRE + '-button',
+    icon: PRE + '-icon',
+    slider: PRE + '-slider',
+    rate: PRE + '-rate',
+    upload: 'fc-upload',
+    cascader: PRE + '-cascader',
+    popover: PRE + '-popover',
+    tooltip: PRE + '-tooltip',
+    colorPicker: PRE + '-colorPicker',
+    timePicker: PRE + '-time-picker',
+    timeSelect: PRE + '-time-select',
+    datePicker: PRE + '-date-picker',
+    'switch': PRE + '-switch',
+    select: 'fc-select',
+    checkbox: 'fc-checkbox',
+    radio: 'fc-radio',
+    inputNumber: PRE + '-input-number',
+    number: PRE + '-input-number',
+    input: PRE + '-input',
+    formItem: PRE + '-form-item',
+    form: PRE + '-form',
+    frame: 'fc-frame',
+    col: PRE + '-col',
+    row: PRE + '-row',
+    tree: 'fc-tree',
+    autoComplete: PRE + '-autocomplete',
+    auto: PRE + '-autocomplete',
+    group: 'fc-group',
+    array: 'fc-group',
+    object: 'fc-sub-form',
+    subForm: 'fc-sub-form',
+}

package/package-form/element-form/src/core/api.js

@@ -0,0 +1,208 @@
+import extend from '@bdsoft-element/utils/lib/extend';
+import is from '@bdsoft-element/utils/lib/type';
+import {invoke} from '@bdsoft-element/formcore/frame/util';
+import toArray from '@bdsoft-element/utils/lib/toarray';
+
+function tidyBtnProp(btn, def) {
+    if (is.Boolean(btn))
+        btn = {show: btn};
+    else if (!is.Undef(btn) && !is.Object(btn)) btn = {show: def};
+    return btn;
+}
+
+/**
+ * 扩展 API 功能的函数
+ * @param {Object} api - 原始 API 对象
+ * @param {Object} h - 辅助对象，包含一些工具方法和上下文信息
+ * @returns {Object} 扩展后的 API 对象
+ */
+export default function extendApi(api, h) {
+    return {
+        /**
+         * 获取表单元素
+         * @returns {HTMLElement} 表单元素
+         */
+        formEl() {
+            return h.$manager.form();
+        },
+        /**
+         * 根据字段 ID 获取包装元素
+         * @param {string} id - 字段 ID
+         * @returns {HTMLElement|undefined} 包装元素，如果未找到则返回 undefined
+         */
+        wrapEl(id) {
+            const ctx = h.getFieldCtx(id);
+            if (!ctx) return;
+            return h.vm.refs[ctx.wrapRef];
+        },
+        /**
+         * 验证整个表单
+         * @param {Function} [callback] - 验证完成后的回调函数，接收验证结果作为参数
+         * @returns {Promise<boolean>} 验证结果的 Promise 对象
+         */
+        validate(callback) {
+            return new Promise((resolve, reject) => {
+                const forms = api.children;
+                const all = [h.$manager.validate()];
+                // 遍历所有子表单并添加验证 Promise
+                forms.forEach(v => {
+                    all.push(v.validate());
+                })
+                Promise.all(all).then(() => {
+                    resolve(true);
+                    callback && callback(true);
+                }).catch((e) => {
+                    reject(e);
+                    callback && callback(e);
+                    h.vm.emit('validate-fail', e, {api});
+                })
+            });
+        },
+        /**
+         * 验证指定字段
+         * @param {string} field - 字段名
+         * @param {Function} [callback] - 验证完成后的回调函数，接收验证错误信息作为参数
+         * @returns {Promise<null|Error>} 验证结果的 Promise 对象
+         */
+        validateField(field, callback) {
+            return new Promise((resolve, reject) => {
+                const ctx = h.getFieldCtx(field);
+                if (!ctx) return;
+                const sub = h.subForm[ctx.id];
+                const all = [h.$manager.validateField(ctx.id)];
+                // 遍历所有子表单并添加验证 Promise
+                toArray(sub).forEach(v => {
+                    all.push(v.validate());
+                })
+                Promise.all(all).then(() => {
+                    resolve(null);
+                    callback && callback(null);
+                }).catch((e) => {
+                    reject(e);
+                    callback && callback(e);
+                    h.vm.emit('validate-field-fail', e, {field, api});
+                })
+            });
+        },
+        /**
+         * 清除指定字段的验证状态
+         * @param {string|string[]} fields - 字段名或字段名数组
+         * @param {boolean} [clearSub=true] - 是否清除子表单的验证状态
+         */
+        clearValidateState(fields, clearSub = true) {
+            api.helper.tidyFields(fields).forEach(field => {
+                if (clearSub) this.clearSubValidateState(field);
+                h.getCtxs(field).forEach(ctx => {
+                    h.$manager.clearValidateState(ctx);
+                });
+            });
+        },
+        /**
+         * 清除指定字段的子表单验证状态
+         * @param {string|string[]} fields - 字段名或字段名数组
+         */
+        clearSubValidateState(fields) {
+            api.helper.tidyFields(fields).forEach(field => {
+                h.getCtxs(field).forEach(ctx => {
+                    const subForm = h.subForm[ctx.id];
+                    if (!subForm) return;
+                    if (Array.isArray(subForm)) {
+                        subForm.forEach(form => {
+                            form.clearValidateState();
+                        })
+                    } else if (subForm) {
+                        subForm.clearValidateState();
+                    }
+                });
+            })
+        },
+        // 提交按钮相关操作
+        btn: {
+            /**
+             * 设置提交按钮的加载状态
+             * @param {boolean} [loading=true] - 是否加载中
+             */
+            loading: (loading = true) => {
+                api.submitBtnProps({loading: !!loading});
+            },
+            /**
+             * 设置提交按钮的禁用状态
+             * @param {boolean} [disabled=true] - 是否禁用
+             */
+            disabled: (disabled = true) => {
+                api.submitBtnProps({disabled: !!disabled});
+            },
+            /**
+             * 设置提交按钮的显示状态
+             * @param {boolean} [isShow=true] - 是否显示
+             */
+            show: (isShow = true) => {
+                api.submitBtnProps({show: !!isShow});
+            }
+        },
+        // 重置按钮相关操作
+        resetBtn: {
+            /**
+             * 设置重置按钮的加载状态
+             * @param {boolean} [loading=true] - 是否加载中
+             */
+            loading: (loading = true) => {
+                api.resetBtnProps({loading: !!loading});
+            },
+            /**
+             * 设置重置按钮的禁用状态
+             * @param {boolean} [disabled=true] - 是否禁用
+             */
+            disabled: (disabled = true) => {
+                api.resetBtnProps({disabled: !!disabled});
+            },
+            /**
+             * 设置重置按钮的显示状态
+             * @param {boolean} [isShow=true] - 是否显示
+             */
+            show: (isShow = true) => {
+                api.resetBtnProps({show: !!isShow});
+            }
+        },
+        /**
+         * 设置提交按钮的属性
+         * @param {Object} [props={}] - 按钮属性对象
+         */
+        submitBtnProps: (props = {}) => {
+            let btn = tidyBtnProp(h.options.submitBtn, true);
+            extend(btn, props);
+            h.options.submitBtn = btn;
+            api.refreshOptions();
+        },
+        /**
+         * 设置重置按钮的属性
+         * @param {Object} [props={}] - 按钮属性对象
+         */
+        resetBtnProps: (props = {}) => {
+            let btn = tidyBtnProp(h.options.resetBtn, false);
+            extend(btn, props);
+            h.options.resetBtn = btn;
+            api.refreshOptions();
+        },
+        /**
+         * 提交表单
+         * @param {Function} [successFn] - 提交成功后的回调函数，接收表单数据和 API 对象作为参数
+         * @param {Function} [failFn] - 提交失败后的回调函数，接收 API 对象和错误信息作为参数
+         * @returns {Promise<Object>} 表单数据的 Promise 对象
+         */
+        submit(successFn, failFn) {
+            return new Promise((resolve, reject) => {
+                api.validate().then(() => {
+                    let formData = api.formData();
+                    is.Function(successFn) && invoke(() => successFn(formData, api));
+                    is.Function(h.options.onSubmit) && invoke(() => h.options.onSubmit(formData, api));
+                    h.vm.emit('submit', formData, api);
+                    resolve(formData);
+                }).catch((...args) => {
+                    is.Function(failFn) && invoke(() => failFn(api, ...args));
+                    reject(...args)
+                })
+            });
+        },
+    };
+}