@houaoran/designer 1.0.0

package/src/components/tableForm/TableForm.vue

@@ -0,0 +1,471 @@
+<template>
+    <div class="_fc-table-form" :class="{ '_fc-disabled': disabled, '_fc-undeletable': !deletable }">
+        <component
+            :is="Form"
+            :option="options"
+            :rule="rule"
+            :extendOption="true"
+            :disabled="disabled"
+            @change="formChange"
+            v-model:api="fapi"
+            @emit-event="$emit"
+        ></component>
+        <el-button link type="primary" class="fc-clock" v-if="addable && (!max || max > this.trs.length)" @click="addRaw(true)"
+        ><i class="fc-icon icon-add-circle" style="font-weight: 700"></i>
+            {{ formCreateInject.t('add') || '添加' }}
+        </el-button>
+    </div>
+</template>
+
+<script>
+import {markRaw, reactive} from 'vue';
+
+export default {
+    name: 'TableForm',
+    emits: ['change', 'add', 'delete', 'update:modelValue'],
+    props: {
+        formCreateInject: Object,
+        modelValue: {
+            type: Array,
+            default: () => [],
+        },
+        columns: {
+            type: Array,
+            required: true,
+            default: () => [],
+        },
+        filterEmptyColumn: {
+            type: Boolean,
+            default: true,
+        },
+        deletable: {
+            type: Boolean,
+            default: true,
+        },
+        addable: {
+            type: Boolean,
+            default: true,
+        },
+        options: {
+            type: Object,
+            default: () =>
+                reactive({
+                    submitBtn: false,
+                    resetBtn: false,
+                }),
+        },
+        max: Number,
+        min: Number,
+        disabled: Boolean,
+        showIndex: {
+            type: Boolean,
+            default: true,
+        },
+        beforeRemove: Function,
+    },
+    watch: {
+        modelValue: {
+            handler() {
+                this.updateTable();
+            },
+            deep: true,
+        },
+        'formCreateInject.preview': function () {
+            this.updateEmptyColspan();
+        },
+        deletable() {
+            this.updateEmptyColspan();
+        },
+        showIndex() {
+            this.rebuildTable();
+        },
+    },
+    data() {
+        return {
+            rule: [],
+            trs: [],
+            fapi: {},
+            Form: markRaw(this.formCreateInject.form.$form()),
+            copyTrs: '',
+            oldValue: '',
+            emptyRule: {
+                type: 'tr',
+                _isEmpty: true,
+                native: true,
+                subRule: true,
+                children: [
+                    {
+                        type: 'td',
+                        style: {
+                            textAlign: 'center',
+                        },
+                        native: true,
+                        subRule: true,
+                        props: {
+                            colspan: 0,
+                        },
+                        children: [this.formCreateInject.t('dataEmpty') || '暂无数据'],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        getColspan() {
+            const visibleCols = this.columns.filter(column => column.hidden !== true).length;
+            let extra = this.formCreateInject.preview || !this.deletable ? 1 : 2;
+            if (this.showIndex === false) {
+                extra -= 1;
+            }
+            return visibleCols + extra;
+        },
+        updateEmptyColspan() {
+            this.emptyRule.children[0].props.colspan = this.getColspan();
+        },
+        rebuildTable() {
+            const oldValue = this.oldValue;
+            this.loadRule();
+            this.updateEmptyColspan();
+            this.trs.splice(0, this.trs.length);
+            this.oldValue = '';
+            this.updateTable();
+            this.oldValue = oldValue;
+        },
+        formChange() {
+            this.updateValue();
+        },
+        updateValue() {
+            const value = this.trs
+                .map((tr, idx) => {
+                    return {
+                        ...(this.modelValue[idx] || {}),
+                        ...this.fapi.getChildrenFormData(tr),
+                    };
+                })
+                .filter(v => {
+                    if (!this.filterEmptyColumn) {
+                        return true;
+                    }
+                    if (v === undefined || v === null) {
+                        return false;
+                    }
+                    let flag = false;
+                    Object.keys(v).forEach(k => {
+                        flag = flag || (v[k] !== undefined && v[k] !== '' && v[k] !== null);
+                    });
+                    return flag;
+                });
+            const str = JSON.stringify(value);
+            if (str !== this.oldValue) {
+                this.oldValue = str;
+                this.$emit('update:modelValue', value);
+                this.$emit('change', value);
+            }
+        },
+        setRawData(idx, formData) {
+            const raw = this.trs[idx];
+            this.fapi.setChildrenFormData(raw, formData, true);
+        },
+        updateTable() {
+            const str = JSON.stringify(this.modelValue);
+            if (this.oldValue === str) {
+                return;
+            }
+            this.oldValue = str;
+            this.trs = this.trs.splice(0, this.modelValue.length);
+            if (!this.modelValue.length) {
+                this.addEmpty();
+            } else {
+                this.clearEmpty();
+            }
+            this.modelValue.forEach((data, idx) => {
+                if (!this.trs[idx]) {
+                    this.addRaw();
+                }
+                this.setRawData(idx, data || {});
+            });
+            this.rule[0].children[1].children = this.trs;
+        },
+        addEmpty() {
+            if (this.trs.length) {
+                this.trs.splice(0, this.trs.length);
+            }
+            this.trs.push(this.emptyRule);
+        },
+        clearEmpty() {
+            if (this.trs[0] && this.trs[0]._isEmpty) {
+                this.trs.splice(0, 1);
+            }
+        },
+        async delRaw(idx) {
+            if (this.disabled || !this.deletable || (this.min > 0 && this.trs.length <= this.min)) {
+                return;
+            }
+            // 检查是否有删除前置回调
+            if (this.beforeRemove) {
+                const result = await this.beforeRemove({index: idx, row: this.modelValue[idx] || {}});
+                // 如果回调返回 false，则停止删除
+                if (result === false) {
+                    return;
+                }
+            }
+            this.trs.splice(idx, 1);
+            this.updateValue();
+            if (this.trs.length) {
+                this.trs.forEach(tr => this.updateRaw(tr));
+            } else {
+                this.addEmpty();
+            }
+            this.$emit('delete', idx);
+        },
+        addRaw(flag) {
+            if (flag && this.disabled) {
+                return;
+            }
+            const tr = this.formCreateInject.form.parseJson(this.copyTrs)[0];
+            if (this.trs.length === 1 && this.trs[0]._isEmpty) {
+                this.trs.splice(0, 1);
+            }
+            this.trs.push(tr);
+            this.updateRaw(tr);
+            if (flag) {
+                this.$emit('add', this.trs.length);
+                this.updateValue();
+            }
+        },
+        updateRaw(tr) {
+            const idx = this.trs.indexOf(tr);
+            if (this.showIndex !== false) {
+                tr.children[0].props.innerText = idx + 1;
+            }
+            tr.children[tr.children.length - 1].children[0].props.onClick = () => {
+                this.delRaw(idx);
+            };
+        },
+        loadRule() {
+            const header = [];
+            const body = [];
+            if (this.showIndex !== false) {
+                header.push({
+                    type: 'th',
+                    native: true,
+                    class: '_fc-tf-head-idx',
+                });
+                body.push({
+                    type: 'td',
+                    class: '_fc-tf-idx',
+                    native: true,
+                    props: {
+                        innerText: '0',
+                    },
+                });
+            }
+            this.columns.forEach(column => {
+                if (column.hidden !== true) {
+                    header.push({
+                        type: 'th',
+                        native: true,
+                        style: {...(column.style || {}), textAlign: column.align || 'center'},
+                        class: column.required ? '_fc-tf-head-required' : '',
+                        props: {
+                            innerText: column.label || '',
+                        },
+                    });
+                    body.push({
+                        type: 'td',
+                        native: true,
+                        children: [...(column.rule || [])],
+                    });
+                }
+            });
+            header.push({
+                type: 'th',
+                native: true,
+                class: '_fc-tf-edit fc-clock',
+                props: {
+                    innerText: this.formCreateInject.t('operation') || '操作',
+                },
+            });
+            body.push({
+                type: 'td',
+                native: true,
+                class: '_fc-tf-btn fc-clock',
+                children: [
+                    {
+                        type: 'i',
+                        native: true,
+                        class: 'fc-icon icon-delete',
+                        props: {},
+                    },
+                ],
+            });
+            this.copyTrs = this.formCreateInject.form.toJson([
+                {
+                    type: 'tr',
+                    native: true,
+                    subRule: true,
+                    children: body,
+                },
+            ]);
+            this.rule = [
+                {
+                    type: 'table',
+                    native: true,
+                    class: '_fc-tf-table',
+                    props: {
+                        border: '1',
+                        cellspacing: '0',
+                        cellpadding: '0',
+                    },
+                    children: [
+                        {
+                            type: 'thead',
+                            native: true,
+                            children: [
+                                {
+                                    type: 'tr',
+                                    native: true,
+                                    children: header,
+                                },
+                            ],
+                        },
+                        {
+                            type: 'tbody',
+                            native: true,
+                            children: this.trs,
+                        },
+                    ],
+                },
+            ];
+        },
+    },
+    created() {
+        this.loadRule();
+        this.updateEmptyColspan();
+    },
+    mounted() {
+        this.updateTable();
+    },
+};
+</script>
+
+<style>
+._fc-table-form {
+    width: 100%;
+    color: #666666;
+}
+._fc-table-form .form-create,
+._fc-table-form .form-create-m {
+    overflow: auto;
+}
+
+._fc-table-form .form-create td .el-form-item {
+    margin-bottom: 1px;
+}
+
+._fc-table-form .form-create td .el-form-item.is-error {
+    margin-bottom: 22px;
+}
+
+._fc-table-form .el-form-item__label,
+._fc-table-form .van-field__label {
+    display: none !important;
+}
+
+._fc-table-form .el-form-item__content {
+    display: flex;
+    margin-left: 0px !important;
+    width: 100% !important;
+}
+
+._fc-tf-head-idx,
+._fc-tf-idx {
+    width: 40px;
+    min-width: 40px;
+    font-weight: 500;
+    text-align: center;
+}
+
+._fc-tf-edit,
+._fc-tf-btn {
+    width: 70px;
+    min-width: 70px;
+    text-align: center;
+}
+
+._fc-tf-btn .fc-icon {
+    cursor: pointer;
+}
+
+._fc-table-form._fc-disabled ._fc-tf-btn .fc-icon,
+._fc-table-form._fc-disabled > .el-button {
+    cursor: not-allowed;
+}
+
+._fc-tf-table {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    table-layout: fixed;
+    border: 1px solid #ebeef5;
+    border-bottom: 0 none;
+}
+
+._fc-table-form ._fc-tf-table > thead > tr > th {
+    border: 0 none;
+    border-bottom: 1px solid #ebeef5;
+    height: 40px;
+    font-weight: 500;
+    padding: 0 5px;
+    box-sizing: border-box;
+}
+
+._fc-table-form ._fc-tf-table > thead > tr > th + th {
+    border-left: 1px solid #ebeef5;
+}
+
+._fc-table-form tr {
+    min-height: 50px;
+}
+
+._fc-table-form ._fc-read-view {
+    text-align: center;
+    width: 100%;
+}
+
+._fc-table-form td {
+    padding: 5px;
+    min-height: 50px;
+    min-width: 80px;
+    position: relative;
+    box-sizing: border-box;
+    overflow-wrap: break-word;
+    /*white-space: nowrap;*/
+    overflow: hidden;
+    border: 0 none;
+    border-bottom: 1px solid #ebeef5;
+}
+
+._fc-table-form td + td {
+    border-left: 1px solid #ebeef5;
+}
+
+._fc-tf-table .el-input-number,
+._fc-tf-table .el-select,
+._fc-tf-table .el-slider,
+._fc-tf-table .el-cascader,
+._fc-tf-table .el-date-editor {
+    width: 100%;
+}
+
+._fc-tf-head-required:before {
+    content: '*';
+    color: #f56c6c;
+    margin-right: 4px;
+}
+
+._fc-undeletable ._fc-tf-edit,
+._fc-undeletable ._fc-tf-btn {
+    display: none !important;
+}
+</style>

package/src/components/tableForm/TableFormColumnView.vue

@@ -0,0 +1,103 @@
+<template>
+    <div class="_fd-tf-col" :style="colStyle">
+        <div class="_fd-tf-title" :style="{textAlign: align || 'center'}">
+            <span v-if="required" class="_fd-tf-required">*</span>{{ label || '' }}
+        </div>
+        <div class="_fd-tf-con">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+import is from '@form-create/utils/lib/type';
+import {defineComponent} from 'vue';
+
+export default defineComponent({
+    name: 'TableFormColumnView',
+    props: {
+        label: String,
+        align: String,
+        width: [Number, String],
+        color: String,
+        required: Boolean,
+    },
+    computed: {
+        colStyle() {
+            const w = this.width;
+            const style = {width: is.Number(w) ? `${w}px` : ((!w || w === 'auto') ? '180px' : w)};
+            if (this.color) {
+                style.color = this.color;
+            }
+            return style;
+        }
+    },
+    data() {
+        return {};
+    }
+});
+</script>
+
+<style>
+
+._fd-tf-col ._fd-tf-con .el-form-item {
+    margin-bottom: 1px !important;
+}
+
+._fd-tf-col {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    width: 180px;
+    flex-shrink: 0;
+}
+
+._fd-tf-con .el-form-item__label, ._fd-tf-con .van-field__label {
+    display: none !important;
+}
+
+._fd-tf-con {
+    display: flex;
+    flex: 1;
+    width: 100%;
+}
+
+._fd-tf-con .el-form-item__content {
+    display: flex;
+    margin-left: 0px !important;
+    width: 100% !important;
+}
+
+
+._fd-tf-title {
+    height: 40px;
+    border-bottom: 1px solid #ebeef5;
+    margin-bottom: 0px;
+    padding: 0 5px;
+    box-sizing: border-box;
+}
+
+._fd-tf-required {
+    color: #f56c6c;
+    margin-right: 4px;
+}
+
+._fd-tf-con ._fc-l-item {
+    display: flex;
+    width: 100%;
+    margin-top: 4px;
+    flex-shrink: 0;
+}
+
+._fd-tf-con ._fc-l-item > * {
+    display: none !important;
+}
+
+._fd-tf-con .el-input-number, ._fd-tf-con .el-select, ._fd-tf-con .el-slider, ._fd-tf-con .el-cascader, ._fd-tf-con .el-date-editor {
+    width: 100%;
+}
+
+._fd-tf-col:has(._fd-tf-col) {
+    width: auto !important;
+}
+</style>

package/src/components/tableForm/TableFormView.vue

@@ -0,0 +1,46 @@
+<template>
+    <div class="_fd-table-form">
+        <div class="_fd-tf-wrap" v-if="$slots.default">
+            <slot></slot>
+        </div>
+        <div class="_fc-child-empty" v-else></div>
+    </div>
+</template>
+
+<script>
+import {defineComponent} from 'vue';
+
+export default defineComponent({
+    name: 'TableFormView',
+    data() {
+        return {};
+    },
+});
+</script>
+
+<style>
+._fd-table-form {
+    min-height: 130px;
+    width: 100%;
+    border: 1px solid #ECECEC;
+    background: #fff;
+}
+
+._fc-child-empty {
+    min-height: 130px;
+}
+
+._fd-tf-wrap {
+    display: flex;
+    overflow: auto;
+}
+
+._fd-tf-wrap > ._fd-drag-tool {
+    flex-shrink: 0;
+    display: flex;
+    margin: 2px;
+    height: auto;
+    overflow: auto;
+}
+
+</style>