ocpview-plus 0.0.1 → 1.0.2

package/src/components/masterplate/RewriteBillListDetails/BillInfoPanelEditTable.vue

@@ -0,0 +1,695 @@
+<template>
+    <Card ref="card" :bordered="false" :padding="0" dis-hover>
+        <!-- 如果myConfig.modetype为1，则显示 -->
+        <template v-if="myConfig.modetype === '1'">
+            <!-- 如果showTitle为true，则显示 -->
+            <p v-if="showTitle" @click="toggle" style="cursor: pointer">
+                <Row
+                    type="flex"
+                    justify="start"
+                    align="middle"
+                    style="margin-top: 14px; margin-bottom: 14px"
+                >
+                    <!-- 如果showGrid为true，则显示icon-custom-pack，否则显示icon-custom-spread -->
+                    <Icon
+                        custom="iconfont icon-custom-pack"
+                        color="#f3b352"
+                        v-show="showGrid"
+                        size="14"
+                    />
+                    <Icon
+                        v-show="!showGrid"
+                        color="#f3b352"
+                        custom="iconfont icon-custom-spread"
+                        size="14"
+                    />
+                    <!-- 显示myConfig.title -->
+                    <span
+                        style="
+                            margin-left: 10px;
+                            font-size: 14px;
+                            font-weight: bold;
+                        "
+                        v-text="myConfig.title"
+                    />
+                </Row>
+            </p>
+            <!-- 显示分割线 -->
+            <Divider
+                style="margin-left: 24px; margin-top: 0px; margin-bottom: 10px"
+            />
+        </template>
+        <!-- 如果myConfig.modetype为2，则显示 -->
+        <template v-if="myConfig.modetype === '2'">
+            <div v-if="showTitle" style="margin-bottom: 10px">
+                <span class="efuture-title-verticalline" /><span
+                    style="font-size: 14px; font-weight: bold"
+                    v-text="myConfig.title"
+                />
+            </div>
+        </template>
+        <div :style="divStyle">
+            <div v-if="$slots.header">
+                <slot name="header"></slot>
+            </div>
+            <Row
+                v-else
+                v-show="showGrid"
+                type="flex"
+                justify="start"
+                align="middle"
+                :gutter="0"
+                style="margin-bottom: 10px"
+            >
+                <Col v-if="showAddBtn">
+                    <Button
+                        :style="btnStyle"
+                        customIcon="iconfont icon-custom-rowadd3"
+                        type="text"
+                        :disabled="myConfig.readOnly"
+                        @click="handleAddRow"
+                        >添加</Button
+                    >
+                </Col>
+                <Col v-if="showAddBtn && showDelBatchBtn">
+                    <Divider type="vertical" style="margin: 0 6px 0 6px" />
+                </Col>
+                <Col v-if="showDelBatchBtn">
+                    <Button
+                        :style="btnStyle"
+                        customIcon="iconfont icon-custom-rowdel3"
+                        type="text"
+                        :disabled="myConfig.readOnly"
+                        @click="delBatchRow"
+                        >删除</Button
+                    >
+                </Col>
+            </Row>
+            <Row v-show="showGrid" style="width: 100%">
+                <!-- 编辑表格 覆写开始 -->
+                <vxe-grid
+                    ref="table"
+                    keep-source
+                    border="inner"
+                    style="width: 100%"
+                    :columns="RewriteColumns"
+                    :data="dataList"
+                    :height="tableHeight"
+                    :max-height="tableMaxHeight"
+                    :loading="loading"
+                    :sort-config="{ remote: true, trigger: 'cell' }"
+                    :valid-config="{
+                        showMessage: false,
+                        autoClear: false,
+                    }"
+                    :editConfig="editConfig"
+                    :edit-rules="validRules"
+                    :show-footer="showFooter"
+                    :footer-method="footerMethod"
+                    :footer-cell-class-name="footerCellClassName"
+                    @sort-change="RewriteTableOnSortChange"
+                    @cell-dblclick="RewriteTableCellDBlclick"
+                >
+                    <template #columnEdit="{ row, rowIndex, columnIndex }">
+                        <!-- <ControlBox
+                            v-if="editIndex === index && editKey === config.key"
+                            :ref="'cell_' + index + '_' + config.key"
+                            :autofocus="true"
+                            :config="getCellConfig(index, config)"
+                            :valueData="getCurRow(index)"
+                            @inputValue="input"
+                            :editIndex="index"
+                            @doAction="doAction"
+                        ></ControlBox> -->
+
+                        <ControlBox
+                            :autofocus="true"
+                            :config="getTableColumnConfig(columnIndex)"
+                            :valueData="row"
+                            :editIndex="rowIndex"
+                            @inputValue="
+                                (params) => {
+                                    cellInput({ params, row });
+                                }
+                            "
+                            @doAction="doAction"
+                        ></ControlBox>
+                        <!-- <p>asdf</p> -->
+                        <!-- <vxe-input type="text"></vxe-input> -->
+                    </template>
+                </vxe-grid>
+                <!-- <Table ref="table"  :row-class-name="rowClassName" :loading="loading" :size="myConfig.tableSize"  :stripe="myConfig.showStripe"  :border="myConfig.showBorder" :height="tableHeight" :maxHeight="tableMaxHeight" :show-header="myConfig.showHeader" @on-selection-change="OnSelectionChange" :columns="tableColumns"  :data="data" @on-column-width-resize="onColumnWidthResize" @on-row-click="rowClick" :show-summary="myConfig.showSummary"  :summary-method="handleSummary">
+                        <template  v-for="config in soltTableColumns" v-slot:[config.key]="{ index }" :key="'show_' + config.key">
+                            <div @click="EditCell(index,config)" :class="config.cellClassName">
+                                <ControlBox v-if="editIndex === index && editKey=== config.key"  :ref="'cell_'+ index + '_' + config.key"  :autofocus="true" :config="getCellConfig(index,config)"  :valueData="getCurRow(index)" @inputValue="input" :editIndex="index" @doAction="doAction"></ControlBox>
+                                <ShowText v-else  :label="formatValue(index,config)"  :contentAlign="config.contentAlign"  :class="IsCellError(index,config)" :config="config" :rowIndex="index"></ShowText>
+                            </div>
+                        </template>
+                    </Table> -->
+                <!-- 编辑表格 覆写结束 -->
+                <div
+                    ref="page"
+                    v-if="myConfig.showPage"
+                    style="background: #eee; padding-top: 5px; width: 100%"
+                >
+                    <Card
+                        :bordered="false"
+                        :padding="0"
+                        :dis-hover="true"
+                        style="border-radius: 0px"
+                    >
+                        <Row
+                            type="flex"
+                            justify="end"
+                            style="padding: 5px; padding-right: 10px"
+                        >
+                            <Page
+                                :total="myConfig.pageConfig.total_results"
+                                :size="myConfig.pageSize"
+                                :current="myConfig.pageConfig.page_no"
+                                :page-size="myConfig.pageConfig.page_size"
+                                :page-size-opts="
+                                    myConfig.pageConfig.pageSizeList
+                                "
+                                @on-page-size-change="changePageSize"
+                                @on-change="changePage"
+                                :show-total="myConfig.pageShowTotal"
+                                :show-elevator="myConfig.pageShowElevator"
+                                :show-sizer="myConfig.pageShowSizer"
+                            ></Page>
+                        </Row>
+                    </Card>
+                </div>
+            </Row>
+            <p
+                v-show="showGrid && showEffectValue"
+                @click="toggleEffect"
+                style="
+                    cursor: pointer;
+                    background-color: #fff2de;
+                    height: 36px;
+                    line-height: 36px;
+                    border: 1px solid #f3b352;
+                    margin-top: 10px;
+                "
+            >
+                <Icon
+                    custom="iconfont icon-custom-help"
+                    size="20"
+                    style="margin-left: 10px"
+                    color="#D5882E"
+                />
+                <span style="margin-left: 4px; color: #d5882e">参考数据</span>
+            </p>
+            <Row
+                v-show="showGrid && showEffectValue && showEffectGrid"
+                class="efuture-effect-grid"
+                style="margin-top: 10px"
+            >
+                <Table
+                    ref="effect_table"
+                    :row-class-name="rowClassName"
+                    :loading="loading"
+                    :size="myConfig.tableSize"
+                    :border="myConfig.showBorder"
+                    :stripe="myConfig.showStripe"
+                    :maxHeight="tableMaxHeight"
+                    :columns="tableColumns"
+                    :data="curlEffectData"
+                    @on-column-width-resize="onColumnWidthResize"
+                >
+                    <template
+                        v-for="config in soltTableColumns"
+                        v-slot:[config.key]="{ row, index }"
+                        :key="'show_effect' + config.key"
+                    >
+                        <ShowText
+                            :label="effectFormatValue(index, config, row)"
+                            :contentAlign="config.contentAlign"
+                            :class="config.cellClassName"
+                            :config="config"
+                            :rowIndex="index"
+                        ></ShowText>
+                    </template>
+                </Table>
+            </Row>
+        </div>
+        <Modal
+            v-if="!editRowFlag"
+            v-model="showEditRowForm"
+            width="90%"
+            title="编辑"
+            @on-ok="editRow"
+        >
+            <div>
+                <ExpandRow
+                    ref="rowForm"
+                    :config="myConfig"
+                    :dictData="dictData"
+                />
+            </div>
+        </Modal>
+    </Card>
+</template>
+<script>
+import editgridcard from "../editgridcard.vue";
+
+export default {
+    name: "BillInfoPanelEditTable",
+    extends: editgridcard,
+    data() {
+        return {
+            editType: false,
+            editConfig: {
+                trigger: "click",
+                mode: "cell",
+                autoClear: false,
+                beforeEditMethod: ({ column }) => {
+                    // console.log("🚀 ~ data ~ column:", column);
+                    if (this.editType) {
+                        return false;
+                    }
+                    if (this.myConfig.cellbeginedit) {
+                        return this.myConfig.cellbeginedit({ column });
+                    }
+                    return true;
+                },
+            },
+            dataList: [],
+        };
+    },
+    computed: {
+        /**
+         * 表格列定义清洗
+         */
+        RewriteColumns() {
+            // console.log("this.tableColumns", this.tableColumns);
+            const newColumns = this.tableColumns.map((item) => {
+                const columnsItemType = this.getColumnsItemType(item.key);
+                return {
+                    ...(item.title && {
+                        title: item.title,
+                    }),
+                    ...(item.name && {
+                        field: item.name,
+                    }),
+                    ...(item.width && {
+                        width: item.width < 60 ? 60 : item.width,
+                    }),
+                    ...(item.minWidth && {
+                        minWidth: item.minWidth < 60 ? 60 : item.minWidth,
+                    }),
+                    ...(item.align && {
+                        align: item.align,
+                    }),
+                    ...(item.resizable && {
+                        resizable: item.resizable,
+                    }),
+                    sortable: false,
+                    ...(columnsItemType && {
+                        type: columnsItemType,
+                        sortable: false,
+                    }),
+                    formatter: (params) => {
+                        const { row, cellValue } = params;
+                        const valueFormat = this.$Method.formatValue(
+                            cellValue,
+                            row,
+                            item
+                        );
+                        return valueFormat;
+                    },
+                    editRender: {
+                        enabled: false,
+                        defaultValue: item.defaultValue || "",
+                    },
+                    ...(!item.readOnly && {
+                        editRender: {
+                            enabled: true,
+                            defaultValue: item.defaultValue || "",
+                        },
+                        slots: { edit: "columnEdit" },
+                    }),
+                };
+            });
+            // console.log("newColumns:", newColumns);
+            return newColumns;
+        },
+        /**
+         * 表格数据
+         */
+        validRules() {
+            return this.$utils.reduce(
+                this.tableColumns,
+                (previous, item) => {
+                    const columnsItemType = this.getColumnsItemType(item.key);
+                    if (!columnsItemType) {
+                        if (item.required) {
+                            previous[item.name] = [
+                                {
+                                    required: true,
+                                    message: `${item.label}必填`,
+                                },
+                            ];
+                        }
+                    }
+                    return previous;
+                },
+                {}
+            );
+        },
+        /**
+         * 是否显示合计
+         */
+        showFooter() {
+            const showType = this.myConfig.showSummary;
+            return showType;
+        },
+        sumFields() {
+            return this.tableColumns
+                .filter((item) => item.summary)
+                .map((item) => item.name);
+        },
+    },
+    methods: {
+        // ==================================================================
+
+        /**
+         * 【覆写】手工触发编辑事件
+         */
+        valueChanged(obj) {
+            const $tableVM = this.$refs.table;
+            const editRecord = $tableVM.getEditRecord();
+            const params = { ...obj, rowinfo: editRecord };
+            const column = this.findColumnConfig(obj.name, this.myConfig.items);
+            const valueChangedSucc = column.valueChanged(params);
+            this.updateFooterEvent();
+            return valueChangedSucc;
+        },
+
+        /**
+         * 【覆写】获取全量数据
+         */
+        getData() {
+            const $table = this.$refs.table;
+            return $table.getTableData().fullData;
+        },
+
+        /**
+         * 【覆写】获取增量变更数据事件
+         * 临时方案，待优化封装
+         */
+        getChangeData() {
+            // console.log("我猜测到这里了获取变更数据");
+            // this.$utils
+            // this.$refs.table
+            const $table = this.$refs.table;
+            const keyField = "_X_ROW_KEY";
+            // 获取编辑分组数据
+            const { insertRecords, removeRecords, updateRecords } =
+                $table.getRecordset();
+            // 数据整理
+            const reportconds = [
+                ...removeRecords.map((item) => {
+                    const itemFilterByKeyField = this.$utils.omit(
+                        item,
+                        keyField
+                    );
+                    return {
+                        ...itemFilterByKeyField,
+                        flag: item.flag || "D",
+                    };
+                }),
+                ...updateRecords.map((item) => {
+                    const itemFilterByKeyField = this.$utils.omit(
+                        item,
+                        keyField
+                    );
+                    return {
+                        ...itemFilterByKeyField,
+                        flag: item.flag || "U",
+                    };
+                }),
+                ...insertRecords.map((item) => {
+                    const itemFilterByKeyField = this.$utils.omit(
+                        item,
+                        keyField
+                    );
+                    return {
+                        ...itemFilterByKeyField,
+                        flag: item.flag || "I",
+                    };
+                }),
+            ];
+            // 排序字段处理逻辑
+            const sortFieldName = "browno";
+            const reportcondsGroupBy_Flag = this.$utils.groupBy(
+                reportconds,
+                "flag"
+            );
+            const reportcondsGroup_I = this.$utils.get(
+                reportcondsGroupBy_Flag,
+                "I",
+                []
+            );
+            const reportcondsGroup_U = this.$utils.get(
+                reportcondsGroupBy_Flag,
+                "U",
+                []
+            );
+            const reportcondsGroup_D = this.$utils.get(
+                reportcondsGroupBy_Flag,
+                "D",
+                []
+            );
+            const fullData = $table.getTableData().fullData;
+            const maxItem = this.$utils.max(fullData, sortFieldName);
+            let serialidMaxSub = 1;
+            if (maxItem) {
+                serialidMaxSub = this.$utils.add(maxItem[sortFieldName], 1);
+            }
+            const insertRecordsForSortNum = reportcondsGroup_I.map((item) => {
+                const f_item = { ...item };
+                f_item[sortFieldName] = serialidMaxSub;
+                serialidMaxSub = this.$utils.add(serialidMaxSub, 1);
+                return f_item;
+            });
+            // 最终返回结果转换拼接返回
+            const flagDataList = [
+                ...insertRecordsForSortNum,
+                ...reportcondsGroup_U,
+                ...reportcondsGroup_D,
+            ];
+            return flagDataList;
+        },
+
+        /**
+         * 覆写表格必填项校验
+         */
+        async tableCheckValidate() {
+            const $tableVM = this.$refs.table;
+            const errMap = await $tableVM.validate(true);
+            return errMap ? true : false;
+        },
+
+        /**
+         *  覆写增行事件
+         */
+        async handleAddRow() {
+            const $tableVM = this.$refs.table;
+            let row = null;
+            if (this.myConfig.addRowBefore) {
+                let temp = {};
+                temp.name = this.myConfig.name;
+                temp.grid = $tableVM;
+                row = this.myConfig.addRowBefore(temp);
+                if (row === false) {
+                    return;
+                }
+            }
+            if (!row || row === true) {
+                row = {};
+            }
+
+            const errMap = await $tableVM.validate(true);
+            if (errMap) {
+                return false;
+            }
+
+            const { row: newRow } = await $tableVM.insertAt(row, -1);
+        },
+
+        /**
+         *  覆写选择删行事件
+         */
+        delBatchRow() {
+            const $tableVM = this.$refs.table;
+            $tableVM.removeCheckboxRow();
+        },
+
+        /**
+         * 【覆写】表格数据赋值事件
+         */
+        setData(data = []) {
+            this.dataList = [...data];
+        },
+
+        /**
+         * 【覆写】获取多选数据事件
+         */
+        getSelection() {
+            const selectDataList = this.$refs.table.getCheckboxRecords(true);
+            return [...selectDataList];
+        },
+
+        /**
+         * 【覆写】更改编辑状态事件
+         */
+        setReadOnly(value) {
+            let obj = {};
+            obj.readOnly = value;
+            if (this.config.showCheckBox !== false) {
+                if (obj.readOnly) {
+                    obj.showCheckBox = false;
+                } else {
+                    obj.showCheckBox = true;
+                }
+            }
+            this.editType = value;
+            this.setPro(obj);
+        },
+
+        // ==================================================================
+
+        /**
+         * 在值发生改变时更新表尾合计
+         */
+        updateFooterEvent() {
+            const $tableVM = this.$refs.table;
+            $tableVM.updateFooter();
+        },
+
+        footerCellClassName() {
+            return "efu-stable-footer-row";
+        },
+
+        footerMethod(params) {
+            const { columns, data } = params;
+            const sumSub = this.editType ? 1 : 2;
+            return [
+                columns.map((item, index) => {
+                    if (index === sumSub) {
+                        return "合计";
+                    }
+                    if (this.sumFields.includes(item.field)) {
+                        const sumData = this.handleSumField({
+                            list: data,
+                            field: item.field,
+                        });
+                        const columnConfig = this.getTableColumnConfig(index);
+                        const format = this.$utils.get(
+                            columnConfig,
+                            "format",
+                            null
+                        );
+                        const notzero = this.$utils.get(
+                            columnConfig,
+                            "notzero",
+                            null
+                        );
+                        const formatSumData = this.$Method.formatNumber(
+                            sumData,
+                            format,
+                            notzero
+                        );
+                        return formatSumData;
+                    }
+                    return null;
+                }),
+            ];
+        },
+
+        handleSumField(params) {
+            const { list, field } = params;
+            let count = 0;
+            list.forEach((item) => {
+                count = this.$utils.add(count, item[field]);
+            });
+            return count;
+        },
+
+        getTableColumnConfig(index) {
+            return this.tableColumns[index];
+        },
+
+        cellInput({ params, row }) {
+            row[params.name] = params.value;
+        },
+
+        batchUpdateRows(dataList = []) {
+            if (this.$utils.isEmpty(dataList)) return false;
+            const $tableVM = this.$refs.table;
+            const editRecord = $tableVM.getEditRecord();
+            if (editRecord) {
+                $tableVM.remove(editRecord.row);
+            }
+            $tableVM.insertAt(dataList, -1);
+        },
+
+        /**
+         * 批量更新数据【待完善】
+         */
+        batchUpdateData() {
+            // this.dataList = this.dataList.map((item) => {
+            //     return {
+            //         ...item,
+            //         ctname: "123",
+            //     };
+            // });
+        },
+
+        /**
+         * 清除表格数据数据
+         */
+        clearData() {
+            // 获取表格组件的实例
+            const $tableVM = this.$refs.table;
+            // 移除表格组件
+            $tableVM.remove();
+        },
+
+        /**
+         * 表格列 type 类型转义
+         */
+        getColumnsItemType(key) {
+            const columnsItemType = {
+                selection: "checkbox",
+                index: "seq",
+            };
+            return this.$utils.get(columnsItemType, key, null);
+        },
+
+        /**
+         * 表格排序事件
+         */
+        RewriteTableOnSortChange(params) {
+            const { order, field } = params;
+            const orderType = order ? order : "normal";
+            this.sortChagne({ order: orderType, key: field });
+        },
+
+        /**
+         * 表格双击事件
+         */
+        RewriteTableCellDBlclick(params) {
+            const { row } = params;
+            this.dbclick(row);
+        },
+    },
+    mounted() {
+        // console.log("我继承覆写了999999");
+    },
+};
+</script>
+
+<style lang="scss" scoped></style>