From d73356a05216308a80de80303b1b81b57f98826f Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Mon, 27 Oct 2025 11:27:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=AC=E5=85=B1=E8=A1=A8=E6=A0=BC=E5=B0=81?=
 =?UTF-8?q?=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TableModel2/index.vue | 721 +++++++++++++++++++++++++++
 1 file changed, 721 insertions(+)
 create mode 100644 src/components/TableModel2/index.vue

diff --git a/src/components/TableModel2/index.vue b/src/components/TableModel2/index.vue
new file mode 100644
index 0000000..e2c65bc
--- /dev/null
+++ b/src/components/TableModel2/index.vue
@@ -0,0 +1,721 @@
+<template>
+    <!-- 表格公共组件 -->
+    <div>
+        <!-- 表单搜索 -->
+        <el-card v-show="showSearch" class="search-card">
+            <el-form
+                :inline="true"
+                ref="queryFormRef"
+                :rules="formRules"
+                :model="queryParams"
+                label-width="auto"
+            >
+            <el-form-item
+                :key="v"
+                :prop="item.f_model"
+                v-for="(item, v) in formLabel"
+                :label="item.isShow ? item.f_label : ''"
+            >
+                <el-input
+                    clearable
+                    :maxlength="item.f_max || 50"
+                    v-if="item.f_type === 'ipt'"
+                    v-model.trim="queryParams[item.f_model]"
+                    :placeholder="`请输入${item.f_label}`"
+                    :style="{ width: item.f_width || '180px' }"
+                />
+                <el-select
+                    clearable
+                    filterable
+                    v-if="item.f_type === 'sel'"
+                    v-model="queryParams[item.f_model]"
+                    :placeholder="`请选择${item.f_label}`"
+                    :style="{ width: item.f_width || '180px' }"
+                >
+                    <el-option
+                        :key="v"
+                        :label="sel.label"
+                        :value="sel.value"
+                        v-for="(sel, v) in item.f_selList"
+                    />
+                </el-select>
+                <el-cascader
+                    clearable
+                    style="width: 180px"
+                    :show-all-levels="false"
+                    :props="item.optionProps"
+                    :options="item.f_selList"
+                    v-if="item.f_type === 'selCasAdd'"
+                    v-model="queryParams[item.f_model]"
+                    @change="
+                        handleCasAdd(
+                            $event,
+                            item.f_model,
+                            cascadeFunc,
+                            extraTableProp,
+                        )
+                    "
+                />
+                <el-cascader
+                    style="width: 180px"
+                    :show-all-levels="false"
+                    :options="item.f_selList"
+                    :props="item.optionProps"
+                    v-if="item.f_type === 'selCas'"
+                    v-model="queryParams[item.f_model]"
+                    @change="handleCas($event, item.f_model)"
+                />
+                <el-date-picker
+                    type="date"
+                    style="width: 240px"
+                    value-format="yyyy-MM-dd"
+                    v-if="item.f_type === 'date'"
+                    v-model="queryParams[item.f_model]"
+                    :placeholder="`请选择${item.f_label}`"
+                />
+                <el-date-picker
+                    type="daterange"
+                    style="width: 240px"
+                    range-separator="至"
+                    value-format="yyyy-MM-dd"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    v-if="item.f_type === 'dateRange'"
+                    v-model="queryParams[item.f_model]"
+                    @change="onChangeTime($event, item.dateType)"
+                    :picker-options="pickerOptions"
+                />
+                <el-input-number
+                    :min="0"
+                    style="width: 240px"
+                    v-if="item.f_type === 'num'"
+                    v-model="queryParams[item.f_model]"
+                />
+            </el-form-item>
+            <!-- 自定义搜索插槽：父组件可自行插入 el-form-item -->
+            <slot name="form" :queryParams="queryParams"></slot>
+            <el-form-item v-if="showBtnCrews">
+                <el-button
+                    v-if="showQueryButtons"
+                    class="query-btn"
+                    @click="handleQuery"
+                >
+                    查询
+                </el-button>
+                <el-button
+                    v-if="showQueryButtons"
+                    class="reset-btn"
+                    @click="resetQuery"
+                >
+                    重置
+                </el-button>
+
+                <slot name="btn" :queryParams="queryParams"></slot>
+            </el-form-item>
+            </el-form>
+        </el-card>
+        <!-- 按钮集群 -->
+        <el-row class="btn-container">
+            <ToolbarModel
+                v-if="showRightTools"
+                :columns="columnCheckList"
+                @queryTable="getTableList"
+                :showSearch.sync="showSearch"
+                :handleShow.sync="handleShow"
+                :indexNumShow.sync="indexNumShow"
+                :selectionShow.sync="selectionShow"
+                :isSelectShow="isSelectShow"
+                :showOperation="showOperation"
+            />
+        </el-row>
+        
+        <!-- 表格 -->
+        <el-card class="table-card" :style="tableCardStyle">
+            <el-table
+            ref="tableRef"
+            :data="tableList"
+            style="width: 100%"
+            :height="tableHeight"
+            v-loading="loading"
+            select-on-indeterminate
+            @selection-change="handleSelectionChange"
+        >
+            <el-table-column
+                width="45"
+                align="center"
+                type="selection"
+                :selectable="selectable"
+                v-if="selectionShow && isSelectShow"
+            />
+            <el-table-column
+                fixed
+                width="55"
+                label="序号"
+                type="index"
+                align="center"
+                :index="
+                    (index) =>
+                        (queryParams.pageNum - 1) * queryParams.pageSize +
+                        index +
+                        1
+                "
+                v-if="indexNumShow"
+            />
+            <el-table-column
+                :key="v"
+                align="center"
+                :label="item.t_label"
+                :prop="item.t_props"
+                :width="item.t_width"
+                show-overflow-tooltip
+                v-for="(item, v) in tableColumCheckProps"
+            >
+                <template slot-scope="scope">
+                    <!-- 判断当前列数据是否需要使用插槽的数据 -->
+                    <template v-if="item.t_slot">
+                        <slot :data="scope.row" :name="item.t_slot"></slot>
+                    </template>
+                    <template v-else>
+                        {{ scope.row[item.t_props] || '-' }}
+                    </template>
+                </template>
+            </el-table-column>
+            <el-table-column
+                align="center"
+                label="操作"
+                :width="handleColWidth"
+                :show-overflow-tooltip="false"
+                fixed="right"
+                v-if="handleShow && showOperation"
+            >
+                <template slot-scope="{ row }">
+                    <div class="optionDivRef">
+                        <slot :data="row" name="handle">-</slot>
+                    </div>
+                </template>
+            </el-table-column>
+        </el-table>
+
+            <!-- 分页 -->
+            <pagination
+                :total="total"
+                @pagination="getTableList"
+                :page.sync="queryParams.pageNum"
+                :limit.sync="queryParams.pageSize"
+            />
+        </el-card>
+    </div>
+</template>
+
+<script>
+import ToolbarModel from '../ToolbarModel'
+export default {
+    components: { ToolbarModel },
+    props: {
+        // 表单查询条件
+        formLabel: {
+            type: Array,
+            default: () => [],
+        },
+        // 列表请求接口
+        requestApi: {
+            type: Function,
+            default: () => function () {},
+        },
+        // 列表配置项
+        columnsList: {
+            type: Array,
+            default: () => [],
+        },
+        // 传递的额外参数
+        sendParams: {
+            type: Object,
+            default: () => null,
+        },
+        // 是否显示查询按钮 默认显示
+        showBtnCrews: {
+            type: Boolean,
+            default: true,
+        },
+        // 是否显示查询/重置按钮（不影响插槽按钮） 默认显示
+        showQueryButtons: {
+            type: Boolean,
+            default: true,
+        },
+        // 级联选择
+        cascadeFunc: {
+            type: Function,
+            default: () => null,
+        },
+        // 级联选择 额外参数
+        extraTableProp: {
+            type: Object,
+            default: () => null,
+        },
+        // 是否显示操作列 默认不显示
+        showOperation: {
+            type: Boolean,
+            default: false,
+        },
+        // 是否显示右侧工具栏 默认不显示
+        showRightTools: {
+            type: Boolean,
+            default: false,
+        },
+
+        // 复选框是否勾选
+        selectable: {
+            type: Function,
+            default: () => {
+                return true
+            },
+        },
+        // 是否显示复选框 由父组件传递 默认不显示
+        isSelectShow: {
+            type: Boolean,
+            default: false,
+        },
+        // 测试时使用的数据源
+        testTableList: {
+            type: Array,
+            default: () => [],
+        },
+        // 是否显示当天日期
+        isCurrentDate: {
+            type: Boolean,
+            default: false,
+        },
+        // 是否只可选择一个月的范围
+        isOneMonth: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    computed: {
+        /* 根据操作栏控制表头是否显示 */
+        tableColumCheckProps() {
+            return this.columnCheckList.filter((e) => {
+                return e.checked != false
+            })
+        },
+        /* 表格卡片动态高度 */
+        tableCardStyle() {
+            const baseHeight = this.showSearch ? 200 : 120; // 搜索区域高度
+            const toolbarHeight = this.showRightTools ? 40 : 0; // 工具栏高度
+            const availableHeight = `calc(100vh - ${baseHeight + toolbarHeight + 25}px)`;
+            return {
+                height: availableHeight,
+                display: 'flex',
+                flexDirection: 'column'
+            }
+        },
+        /* 表格自适应高度 */
+        tableHeight() {
+            const baseHeight = this.showSearch ? 200 : 120; // 搜索区域高度
+            const toolbarHeight = this.showRightTools ? 40 : 0; // 工具栏高度
+            const paginationHeight = 60; // 分页高度
+            const cardPadding = 40; // 卡片内边距
+            const tableHeight = `calc(100vh - ${baseHeight + toolbarHeight + paginationHeight + cardPadding}px)`;
+            return tableHeight;
+        }
+    },
+    watch: {
+        columnsList: {
+            handler(nv, ov) {
+                if (nv !== ov) {
+                    this.columnsList = nv
+                    this.columnCheckList = this.columnsList.map((e) => {
+                        this.$set(e, 'checked', true)
+                        return e
+                    })
+                }
+            },
+            deep: true,
+        },
+    },
+    data() {
+        return {
+            // 表单校验
+            formRules: {},
+            loading: false,
+            // 列表接口查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+            },
+            // 列表数据源
+            tableList: [],
+            // 选中数据
+            selectedData: [],
+            // 列表数据条数
+            total: 0,
+            // 搜索区域是否隐藏
+            showSearch: true,
+            // 是否显示复选框
+            selectionShow: true,
+            // 是否显示序号
+            indexNumShow: true,
+            // 是否显示操作列
+            handleShow: true,
+            // 列表每列 label
+            columnCheckList: [],
+            // 操作列最小宽度
+            dynamicWidth: 0,
+            // 操作列固定宽度，防止列数过少导致过宽
+            handleColWidth: 260,
+            // 自增id
+            idCount: 1,
+            // 日期查询条件 字段名称
+            typeList: [],
+
+            // 日期选择器配置
+            pickerOptions: {},
+        }
+    },
+
+    created() {
+        this.columnCheckList = this.columnsList.map((e) => {
+            this.$set(e, 'checked', true)
+            return e
+        })
+        /* 生成查询参数 */
+        this.formLabel.map((e) => {
+            if (e.f_type === 'dateRange') {
+                this.$set(this.queryParams, e.dateType[0], '')
+                this.$set(this.queryParams, e.dateType[1], '')
+                this.typeList = e.dateType
+
+                if (this.isOneMonth) {
+                    this.pickerOptions = {
+                        disabledDate: (time) => {
+                            // 禁用今天之后的日期
+                            return time.getTime() > Date.now()
+                        },
+                        onPick: ({ maxDate, minDate }) => {
+                            // 当选择第一个日期后，设置第二个日期的可选范围
+                            this.pickerOptions.minDate = minDate
+                            if (minDate) {
+                                const maxRangeDate = new Date(minDate)
+                                maxRangeDate.setMonth(minDate.getMonth() + 1)
+                                this.pickerOptions.maxDate = maxRangeDate
+                            } else {
+                                this.pickerOptions.maxDate = null
+                            }
+                        },
+                    }
+                }
+            } else {
+                this.$set(this.queryParams, e.f_model, '')
+            }
+        })
+        if (this.sendParams !== null) {
+            for (let key in this.sendParams) {
+                this.$set(this.queryParams, key, this.sendParams[key])
+            }
+        }
+        this.getTableList()
+    },
+    updated() {
+        // 若需要自适应最小宽度，可启用下行；当前使用固定宽度 handleColWidth
+        this.dynamicWidth = this.getOperatorWidth()
+    },
+    methods: {
+        /** 获取列表数据 */
+        async getTableList() {
+            try {
+                if (
+                    this.queryParams.time &&
+                    this.queryParams.time.length !== 0
+                ) {
+                    this.queryParams[this.typeList[0]] =
+                        this.queryParams.time[0]
+                    this.queryParams[this.typeList[1]] =
+                        this.queryParams.time[1]
+                }
+
+                const params = { ...this.queryParams }
+                const queryParams = JSON.parse(JSON.stringify(params))
+                delete queryParams.time // 剔除无关参数
+                // console.log(
+                //     `%c🔍 列表查询入参 %c`,
+                //     'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
+                //     '',
+                //     queryParams,
+                // )
+                this.loading = true
+                const res = await this.requestApi(queryParams)
+                if (res.code === 200) {
+                    this.tableList = res.rows
+                    this.total = res.total
+                }
+                this.loading = false
+            } catch (error) {
+                this.loading = false
+                this.tableList = this.testTableList
+            }
+        },
+        /** 查询按钮 */
+        handleQuery() {
+            this.getTableList()
+        },
+
+        /** 重置按钮 */
+        resetQuery() {
+            this.$refs.queryFormRef.resetFields()
+            if (this.typeList.length > 1) {
+                if (this.isCurrentDate) {
+                    this.queryParams[this.typeList[0]] = new Date()
+                        .toISOString()
+                        .split('T')[0]
+                    this.queryParams[this.typeList[1]] = new Date()
+                        .toISOString()
+                        .split('T')[0]
+                    this.queryParams.time = [
+                        new Date().toISOString().split('T')[0],
+                        new Date().toISOString().split('T')[0],
+                    ]
+                } else {
+                    this.queryParams[this.typeList[0]] = ''
+                    this.queryParams[this.typeList[1]] = ''
+                    this.queryParams.time = []
+                }
+            } else {
+                this.queryParams[this.typeList[0]] = ''
+            }
+            this.queryParams.pageNum = 1
+            this.queryParams.pageSize = 10
+            this.getTableList()
+        },
+        /** 级联选择 */
+        handleCas(e, val) {
+            this.queryParams[val] = e[e.length - 1]
+        },
+        /** 级联选择只选最后一级 */
+        handleCasAdd(e, val, func, prop) {
+            if (e.length !== 0) {
+                this.queryParams[val] = e[e.length - 1]
+                let setObj = {}
+                // 合并
+                if (prop) {
+                    Object.assign(setObj, prop)
+                }
+                // 设置id自增
+                this.$set(setObj, 'id', this.idCount)
+                this.idCount++
+                // 获取单位
+                func({
+                    id: e[e.length - 1],
+                })
+                    .then((res) => {
+                        this.$set(setObj, 'name', res.data.parentName)
+                        this.$set(setObj, 'unitName', res.data.unitName)
+                        this.$set(setObj, 'typeName', res.data.name)
+                    })
+                    .catch((err) => {})
+                for (let key in this.queryParams) {
+                    this.$set(setObj, key, this.queryParams[key])
+                }
+                this.tableList.unshift(setObj)
+                console.log(this.tableList)
+            }
+        },
+        /** 动态设置操作列的列宽 */
+        getOperatorWidth() {
+            const operatorColumn =
+                document.getElementsByClassName('optionDivRef')
+
+            // 默认宽度
+            let width = 100
+            // 内间距
+            let paddingSpacing = 0
+            // 按钮数量
+            let buttonCount = 0
+
+            if (operatorColumn.length > 0) {
+                Array.prototype.forEach.call(operatorColumn, function (item) {
+                    // 最宽的宽度
+                    width = width > item.offsetWidth ? width : item.offsetWidth
+                    const buttons = item.getElementsByClassName('el-button')
+                    buttonCount = buttons.length
+                    buttonCount =
+                        buttonCount > buttons.length
+                            ? buttonCount
+                            : buttons.length
+                })
+                return width + 10
+            }
+        },
+
+        queryTableList(params) {
+            Object.assign(this.queryParams, params)
+            this.getTableList()
+        },
+
+        handleSelectionChange(e) {
+            this.selectedData = e
+        },
+
+        /* 时间change事件 */
+        onChangeTime(e, type) {
+            if (this.isOneMonth) {
+                if (e && e.length === 2) {
+                    const [start, end] = e
+                    const startDate = new Date(start)
+                    const endDate = new Date(end)
+                    // 计算两个日期之间的天数差
+                    const diffTime = Math.abs(endDate - startDate)
+                    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+                    // 如果超过31天，自动调整结束日期
+                    if (diffDays > 31) {
+                        const newEndDate = new Date(startDate)
+                        newEndDate.setDate(startDate.getDate() + 31)
+                        this.queryParams.time = [
+                            start,
+                            newEndDate.toISOString().split('T')[0],
+                        ]
+                        this.$message.warning(
+                            '选择的时间范围超过31天，查询将会缓慢，已自动调整',
+                        )
+                    }
+                }
+            } else {
+                const [_1, _2] = type
+                const [_time1, _time2] = e
+                if (e.length > 0) {
+                    this.queryParams[_1] = _time1
+                    this.queryParams[_2] = _time2
+                }
+            }
+        },
+    },
+
+    watch: {
+        sendParams: {
+            handler(nv, ov) {
+                if (nv) {
+                    for (let key in nv) {
+                        this.$set(this.queryParams, key, this.sendParams[key])
+                    }
+                }
+            },
+            deep: true,
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.search-card {
+    margin-bottom: 10px;
+
+    ::v-deep .el-form-item {
+        margin-bottom: 10px;
+    }
+
+    .query-btn {
+        width: 98px;
+        height: 36px;
+        background: #1F72EA;
+        box-shadow: 0px 4px 8px 0px rgba(51,135,255,0.5);
+        border-radius: 4px 4px 4px 4px;
+        color: #fff;
+        border: none;
+        font-size: 14px;
+        transition: all 0.3s;
+
+        &:hover {
+            background: #4A8BFF;
+            box-shadow: 0px 6px 12px 0px rgba(51,135,255,0.6);
+        }
+    }
+
+    .reset-btn {
+        width: 98px;
+        height: 36px;
+        background: #FFFFFF;
+        box-shadow: 0px 4px 8px 0px rgba(76,76,76,0.2);
+        border-radius: 4px 4px 4px 4px;
+        color: #333;
+        border: 1px solid #d9d9d9;
+        font-size: 14px;
+        transition: all 0.3s;
+
+        &:hover {
+            background: #f5f5f5;
+            box-shadow: 0px 6px 12px 0px rgba(76,76,76,0.3);
+            border-color: #40a9ff;
+        }
+    }
+}
+
+.table-card {
+    ::v-deep .el-card__body {
+        padding: 20px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    ::v-deep .el-table {
+        width: 100%;
+    }
+
+    ::v-deep .el-pagination {
+        margin-top: 20px;
+    }
+}
+
+.btn-container {
+    margin-bottom: 6px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+::v-deep .btn-handler {
+    display: flex;
+    flex: 1;
+
+    .el-button {
+        padding: 6px 18px;
+    }
+}
+
+::v-deep .optionDivRef {
+    white-space: nowrap;
+    display: inline-block;
+
+    .el-button {
+        padding: 6px 12px;
+    }
+}
+
+// 表格样式优化
+::v-deep .el-table {
+    .el-button--text {
+        padding: 0;
+        font-size: 14px;
+    }
+
+    // 表头样式
+    thead {
+        th {
+            background-color: #fafafa;
+            color: #333;
+            font-weight: 600;
+        }
+    }
+
+    // 表格边框样式
+    &.el-table--border {
+        border: 1px solid #ebeef5;
+        border-right: none;
+        border-bottom: none;
+
+        th,
+        td {
+            border-right: 1px solid #ebeef5;
+        }
+    }
+}
+</style>