first

src/components/table/column/index.vue

@@ -0,0 +1,23 @@
+<script lang='ts'>
+import { defineComponent, createVNode, reactive } from 'vue'
+import { Column } from 'vxe-table'
+import { uuid } from '@/utils/random'
+
+export default defineComponent({
+    name: 'Column',
+    props: {
+        attr: {
+            type: Object,
+            required: true
+        }
+    },
+    setup(props, { slots }) {
+        const attr = reactive(props.attr)
+        attr['align'] = attr['align'] ? attr['align'] : 'center'
+        attr['column-key'] = attr['column-key'] ? attr['column-key'] : attr.prop || uuid()
+        return () => {
+            return createVNode(Column, attr, slots.default)
+        }
+    }
+})
+</script>

src/components/table/defaultAttribute.ts

@@ -0,0 +1,17 @@
+import { VxeTableProps } from 'vxe-table'
+
+export const defaultAttribute: VxeTableProps = {
+    align: 'center',
+    headerCellClassName: 'table-header-cell',
+    border: true,
+    stripe: true,
+    size: 'small',
+    columnConfig: { resizable: true },
+    rowConfig: { isCurrent: true, isHover: true,keyField: 'id' },
+    scrollX: { scrollToLeftOnChange: true },
+    scrollY: { scrollToTopOnChange: true, enabled: true },
+    treeConfig: {
+        reserve: true
+    },
+    showOverflow:true
+}

src/components/table/fieldRender/index.vue

@@ -0,0 +1,277 @@
+<template>
+    <!-- Icon -->
+    <Icon class="ba-icon-dark" v-if="field.render == 'icon'" :name="fieldValue ? fieldValue : field.default ?? ''" />
+
+    <!-- switch -->
+    <el-switch
+        v-if="field.render == 'switch'"
+        @change="onChangeField"
+        :model-value="fieldValue.toString()"
+        :loading="row.loading"
+        active-value="1"
+        inactive-value="0"
+    />
+
+    <!-- image -->
+    <div v-if="field.render == 'image' && fieldValue" class="ba-render-image">
+        <el-image
+            :hide-on-click-modal="true"
+            :preview-teleported="true"
+            :preview-src-list="[fullUrl(fieldValue)]"
+            :src="fullUrl(fieldValue)"
+        ></el-image>
+    </div>
+
+    <!-- tag -->
+    <div v-if="field.render == 'tag' && fieldValue !== ''">
+        <el-tag :type="getTagType(fieldValue, field.custom)" size="small">
+            {{ field.replaceValue ? field.replaceValue[fieldValue] : fieldValue }}
+        </el-tag>
+    </div>
+
+    <!-- datetime -->
+    <div v-if="field.render == 'datetime'">
+        {{ !fieldValue ? '/' : timeFormat(fieldValue, field.timeFormat ?? undefined) }}
+    </div>
+
+    <!-- color -->
+    <div v-if="field.render == 'color'">
+        <div :style="{ background: fieldValue }" class="ba-render-color"></div>
+    </div>
+
+    <!-- customTemplate 自定义模板 -->
+    <div
+        v-if="field.render == 'customTemplate'"
+        v-html="field.customTemplate ? field.customTemplate(row, field, fieldValue, column, index) : ''"
+    ></div>
+
+    <!-- 自定义组件/函数渲染 -->
+    <component
+        v-if="field.render == 'customRender'"
+        :is="field.customRender"
+        :renderRow="row"
+        :renderField="field"
+        :renderValue="fieldValue"
+        :renderColumn="column"
+        :renderIndex="index"
+    />
+
+    <!-- 按钮组 -->
+    <div v-if="field.render == 'buttons' && buttons" class="cn-render-buttons">
+        <template v-for="(btn, idx) in buttons" :key="idx">
+            <!-- 常规按钮 -->
+            <el-button
+                link
+                v-if="btn.render == 'basicButton'"
+                @click="onButtonClick(btn)"
+                :class="btn.class"
+                class="table-operate"
+                :type="btn.type"
+                :loading="props.row.loading || false"
+                v-bind="btn.attr"
+            >
+                <div v-if="btn.text || btn.title" class="table-operate-text">{{ btn.text || btn.title }}</div>
+            </el-button>
+
+            <!-- 带提示信息的按钮 -->
+            <el-tooltip
+                v-if="btn.render == 'tipButton'"
+                :disabled="btn.title && !btn.disabledTip ? false : true"
+                :content="btn.title"
+                placement="top"
+            >
+                <el-button
+                    link
+                    @click="onButtonClick(btn)"
+                    :class="btn.class"
+                    class="table-operate"
+                    :type="btn.type"
+                    v-bind="btn.attr"
+                >
+                    <div v-if="btn.text || btn.title" class="table-operate-text">
+                        {{ btn.text || btn.title }}
+                    </div>
+                </el-button>
+            </el-tooltip>
+
+            <!-- 带确认框的按钮 -->
+            <el-popconfirm
+                v-if="btn.render == 'confirmButton'"
+                :disabled="btn.disabled && btn.disabled(row, field)"
+                v-bind="btn.popconfirm"
+                @confirm="onButtonClick(btn)"
+            >
+                <template #reference>
+                    <div style="display: inline-block">
+                        <el-button link :class="btn.class" class="table-operate" :type="btn.type" v-bind="btn.attr">
+                            <div v-if="btn.text || btn.title" class="table-operate-text">
+                                {{ btn.text || btn.title }}
+                            </div>
+                        </el-button>
+                    </div>
+                </template>
+            </el-popconfirm>
+
+            <el-dropdown v-if="btn.render == 'dropdown'" trigger="click" @command="handlerCommand">
+                <el-button link type="primary" class="table-operate">
+                    <div class="table-operate-text">更多</div>
+                </el-button>
+                <template #dropdown>
+                    <el-dropdown-menu>
+                        <el-dropdown-item
+                            v-for="item in btn.buttons"
+                            :key="item.text"
+                            :command="item"
+                            :style="{
+                                color: item.type === 'primary' ? 'var(--el-color-primary)' : 'var(--el-color-danger'
+                            }"
+                        >
+                            {{ item.text }}
+                        </el-dropdown-item>
+                    </el-dropdown-menu>
+                </template>
+            </el-dropdown>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, inject } from 'vue'
+import { ElMessageBox, type TagProps } from 'element-plus'
+import type TableStoreClass from '@/utils/tableStore'
+import { fullUrl, timeFormat } from '@/utils/common'
+import type { VxeColumnProps } from 'vxe-table'
+
+const TableStore = inject('tableStore') as TableStoreClass
+
+interface Props {
+    row: TableRow
+    field: TableColumn
+    column: VxeColumnProps
+    index: number
+}
+const props = defineProps<Props>()
+
+// 字段值（单元格值）
+const fieldName = ref(props.field.field)
+const fieldValue = ref(fieldName.value ? props.row[fieldName.value] : '')
+if (fieldName.value && fieldName.value.indexOf('.') > -1) {
+    let fieldNameArr = fieldName.value.split('.')
+    let val: any = ref(props.row[fieldNameArr[0]])
+    for (let index = 1; index < fieldNameArr.length; index++) {
+        val.value = val.value ? val.value[fieldNameArr[index]] ?? '' : ''
+    }
+    fieldValue.value = val.value
+}
+
+if (props.field.renderFormatter && typeof props.field.renderFormatter == 'function') {
+    fieldValue.value = props.field.renderFormatter(props.row, props.field, fieldValue.value, props.column, props.index)
+}
+
+const onChangeField = (value: any) => {
+    TableStore.onTableAction('field-change', { value: value, ...props })
+}
+
+const onButtonClick = (btn: OptButton) => {
+    btn.click && btn.click(props.row, props.field)
+}
+
+const getTagType = (value: string, custom: any): TagProps['type'] => {
+    return custom && custom[value] ? custom[value] : ''
+}
+
+// 按钮组处理 最多显示三个按钮 多余的显示为下拉
+const buttonsFilter = props.field.buttons?.filter(btn => !(btn.disabled && btn.disabled(props.row, props.field))) || []
+const buttons = ref<any[]>([])
+if (buttonsFilter.length > 3) {
+    buttonsFilter?.forEach((btn, index) => {
+        btn.text = btn.text || btn.title
+        if (index < 2) {
+            buttons.value.push(btn)
+        } else {
+            if (buttons.value.length > 2) {
+                buttons.value[buttons.value.length - 1].buttons.push(btn)
+            } else {
+                buttons.value.push({
+                    render: 'dropdown',
+                    buttons: [btn]
+                })
+            }
+        }
+    })
+} else {
+    buttons.value = buttonsFilter
+}
+const handlerCommand = (item: OptButton) => {
+    switch (item.render) {
+        case 'basicButton':
+            onButtonClick(item)
+            break
+        case 'confirmButton':
+            ElMessageBox.confirm(item.popconfirm?.title || '提示', {
+                confirmButtonText: item.popconfirm?.confirmButtonText || '确认',
+                cancelButtonText: item.popconfirm?.cancelButtonText || '取消',
+                type: 'warning'
+            }).then(() => {
+                onButtonClick(item)
+            })
+        default:
+            break
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.m-10 {
+    margin: 4px;
+}
+.ba-render-image {
+    text-align: center;
+}
+.images-item {
+    width: 50px;
+    margin: 0 5px;
+}
+.el-image {
+    height: 36px;
+    width: 36px;
+}
+.table-operate-text {
+    padding-left: 5px;
+    font-size: 12px;
+}
+.table-operate {
+    padding: 4px 5px;
+    height: auto;
+}
+.cn-render-buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .icon {
+        font-size: 12px !important;
+        // color: var(--ba-bg-color-overlay) !important;
+    }
+}
+
+.move-button {
+    cursor: move;
+}
+.ml-6 {
+    display: inline-flex;
+    vertical-align: middle;
+    margin-left: 6px;
+}
+.ml-6 + .el-button {
+    margin-left: 6px;
+}
+.ba-render-color {
+    height: 25px;
+    width: 100%;
+}
+.cn-render-buttons {
+    :deep(.el-button) {
+        margin-left: 0;
+    }
+}
+</style>

src/components/table/header/index.vue

@@ -0,0 +1,282 @@
+<template>
+    <div ref="tableHeader" class="cn-table-header">
+        <div class="table-header ba-scroll-style">
+            <el-form
+                style="flex: 1; height: 32px; overflow: hidden; margin-right: 20px"
+                id="header-form"
+                @submit.prevent=""
+                @keyup.enter="onComSearch"
+                label-position="left"
+                :inline="true"
+            >
+                <el-form-item label="区域" v-if="area">
+                    <Area ref="areaRef" v-model="tableStore.table.params.deptIndex" />
+                </el-form-item>
+                <el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: unset">
+                    <DatePicker ref="datePickerRef"></DatePicker>
+                </el-form-item>
+                <slot name="select"></slot>
+            </el-form>
+            <template v-if="$slots.select || datePicker">
+                <el-button type="primary" @click="showSelectChange" v-if="showUnfoldButton">
+                    <Icon size="14" name="el-icon-ArrowUp" style="color: #fff" v-if="showSelect" />
+                    <Icon size="14" name="el-icon-ArrowDown" style="color: #fff" v-else />
+                </el-button>
+                <el-button @click="onComSearch" type="primary" :icon="Search">查询</el-button>
+                <el-button @click="onResetForm" :icon="RefreshLeft">重置</el-button>
+            </template>
+            <slot name="operation"></slot>
+        </div>
+        <el-form
+            :style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
+            id="header-form-second"
+            @submit.prevent=""
+            @keyup.enter="onComSearch"
+            label-position="left"
+            :inline="true"
+        >
+            <el-form-item label="区域" v-if="area">
+                <Area ref="areaRef" v-model="tableStore.table.params.deptIndex" />
+            </el-form-item>
+            <el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: unset">
+                <DatePicker ref="datePickerRef"></DatePicker>
+            </el-form-item>
+            <slot name="select"></slot>
+        </el-form>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { inject, ref, onMounted, nextTick, onUnmounted } from 'vue'
+import type TableStore from '@/utils/tableStore'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import Area from '@/components/form/area/index.vue'
+import { mainHeight } from '@/utils/layout'
+import { useDictData } from '@/stores/dictData'
+import { Search, RefreshLeft } from '@element-plus/icons-vue'
+
+const tableStore = inject('tableStore') as TableStore
+const tableHeader = ref()
+const datePickerRef = ref()
+const dictData = useDictData()
+const areaRef = ref()
+
+interface Props {
+    datePicker?: boolean
+    area?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    datePicker: false,
+    area: false
+})
+// 动态计算table高度
+const resizeObserver = new ResizeObserver(entries => {
+    for (const entry of entries) {
+        handlerHeight()
+        computedSearchRow()
+    }
+})
+const showUnfoldButton = ref(false)
+const headerFormSecondStyleOpen = {
+    opacity: 1,
+    height: 'auto',
+    padding: '0 15px 13px 15px'
+}
+const headerFormSecondStyleClose = {
+    opacity: 0,
+    height: '0',
+    padding: '0'
+}
+onMounted(() => {
+    if (props.datePicker) {
+        tableStore.table.params.searchBeginTime = datePickerRef.value.timeValue[0]
+        tableStore.table.params.searchEndTime = datePickerRef.value.timeValue[1]
+        tableStore.table.params.startTime = datePickerRef.value.timeValue[0]
+        tableStore.table.params.endTime = datePickerRef.value.timeValue[1]
+        tableStore.table.params.timeFlag = datePickerRef.value.timeFlag
+    }
+    if (props.area) {
+        tableStore.table.params.deptIndex = dictData.state.area[0].id
+    }
+    nextTick(() => {
+        resizeObserver.observe(tableHeader.value)
+        computedSearchRow()
+    })
+})
+onUnmounted(() => {
+    resizeObserver.disconnect()
+})
+
+const handlerHeight = () => {
+    tableStore.table.height = mainHeight(
+        tableStore.table.publicHeight + tableHeader.value.offsetHeight + (tableStore.showPage ? 58 : 0) + 20
+    ).height as string
+}
+const computedSearchRow = () => {
+    const headerForm = document.getElementById('header-form') as HTMLElement
+    const headerFormSecond = document.getElementById('header-form-second') as HTMLElement
+    if (!headerForm) return
+    // 判断是否需要折叠
+    if (headerForm.scrollHeight > 50) {
+        showUnfoldButton.value = true
+    } else {
+        showUnfoldButton.value = false
+    }
+
+    // 清空headerFormSecond下的元素
+    while (headerFormSecond.firstChild) {
+        headerFormSecond.removeChild(headerFormSecond.firstChild)
+    }
+
+    // 获取第一行放了几个表单
+    const elFormItem = document.querySelectorAll('#header-form .el-form-item') as NodeListOf<HTMLElement>
+
+    //  把第一行放不下的复制一份放到headerFormSecond
+    let width = 0
+    for (let i = 0; i < elFormItem.length; i++) {
+        width += elFormItem[i].offsetWidth + 32
+        if (width > headerForm.offsetWidth) {
+            const clonedForm = elFormItem[i].cloneNode(true)
+            headerFormSecond.appendChild(clonedForm)
+        }
+    }
+}
+
+const showSelect = ref(false)
+const showSelectChange = () => {
+    showSelect.value = !showSelect.value
+}
+const onComSearch = async () => {
+    if (props.datePicker) {
+        tableStore.table.params.searchBeginTime = datePickerRef.value.timeValue[0]
+        tableStore.table.params.searchEndTime = datePickerRef.value.timeValue[1]
+        tableStore.table.params.startTime = datePickerRef.value.timeValue[0]
+        tableStore.table.params.endTime = datePickerRef.value.timeValue[1]
+        tableStore.table.params.timeFlag = datePickerRef.value.timeFlag
+    }
+
+    await tableStore.onTableAction('search', {})
+}
+const onResetForm = () => {
+    tableStore.onTableAction('reset', {})
+}
+defineExpose({ onComSearch, areaRef })
+</script>
+
+<style scoped lang="scss">
+.table-header {
+    position: relative;
+    overflow-x: auto;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    max-width: 100%;
+    background-color: var(--ba-bg-color-overlay);
+    border: 1px solid var(--el-border-color);
+    border-bottom: none;
+    padding: 13px 15px;
+    font-size: 14px;
+
+    .table-header-operate-text {
+        margin-left: 6px;
+    }
+}
+
+.table-com-search {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    background-color: var(--ba-bg-color-overlay);
+    border: 1px solid var(--ba-border-color);
+    border-bottom: none;
+    padding: 13px 15px 20px 15px;
+    font-size: 14px;
+}
+
+#header-form-second,
+#header-form {
+    // display: flex;
+    // flex-wrap: wrap;
+    transition: all 0.3s;
+}
+
+.mlr-12 {
+    margin-left: 12px;
+}
+
+.mlr-12 + .el-button {
+    margin-left: 12px;
+}
+
+.table-search {
+    display: flex;
+    margin-left: auto;
+
+    .quick-search {
+        width: auto;
+    }
+}
+
+.table-search-button-group {
+    display: flex;
+    margin-left: 12px;
+    border: 1px solid var(--el-border-color);
+    border-radius: var(--el-border-radius-base);
+    overflow: hidden;
+
+    button:focus,
+    button:active {
+        background-color: var(--ba-bg-color-overlay);
+    }
+
+    button:hover {
+        background-color: var(--el-color-info-light-7);
+    }
+
+    .table-search-button-item {
+        height: 30px;
+        border: none;
+        border-radius: 0;
+    }
+
+    .el-button + .el-button {
+        margin: 0;
+    }
+
+    .right-border {
+        border-right: 1px solid var(--el-border-color);
+    }
+}
+
+html.dark {
+    .table-search-button-group {
+        button:focus,
+        button:active {
+            background-color: var(--el-color-info-dark-2);
+        }
+
+        button:hover {
+            background-color: var(--el-color-info-light-7);
+        }
+
+        button {
+            background-color: var(--ba-bg-color-overlay);
+
+            el-icon {
+                color: white !important;
+            }
+        }
+    }
+}
+#header-form,
+#header-form-second {
+    :deep(.el-select) {
+        --el-select-width: 220px;
+    }
+    :deep(.el-input) {
+        --el-input-width: 220px;
+    }
+}
+</style>

src/components/table/index.vue

@@ -0,0 +1,179 @@
+<template>
+    <div :style="{ height: tableStore.table.height }">
+        <vxe-table
+            ref="tableRef"
+            height="auto"
+            :data="tableStore.table.data"
+            v-loading="tableStore.table.loading"
+            v-bind="Object.assign({}, defaultAttribute, $attrs)"
+            @checkbox-all="selectChangeEvent"
+            @checkbox-change="selectChangeEvent"
+        >
+            <!-- Column 组件内部是 el-table-column -->
+            <template v-if="isGroup">
+                <vxe-table-colgroup
+                    v-if="isGroup"
+                    v-for="(item, index) in tableStore.table.column"
+                    :field="item.field"
+                    :title="item.title"
+                    :key="index"
+                    :min-width="item.width"
+                    show-overflow
+                    align="center"
+                >
+                    <Column
+                        :attr="child"
+                        :key="key + '-column'"
+                        v-for="(child, key) in item.children"
+                        :tree-node="child.treeNode"
+                    >
+                        <!-- tableStore 预设的列 render 方案 -->
+                        <template v-if="child.render" #default="scope">
+                            <FieldRender
+                                :field="child"
+                                :row="scope.row"
+                                :column="scope.column"
+                                :index="scope.rowIndex"
+                                :key="
+                                    key +
+                                    '-' +
+                                    child.render +
+                                    '-' +
+                                    (child.field ? '-' + child.field + '-' + scope.row[child.field] : '')
+                                "
+                            />
+                        </template>
+                    </Column>
+                </vxe-table-colgroup>
+            </template>
+            <template v-else>
+                <Column
+                    :attr="item"
+                    :key="key + '-column'"
+                    v-for="(item, key) in tableStore.table.column"
+                    :tree-node="item.treeNode"
+                >
+                    <!-- tableStore 预设的列 render 方案 -->
+                    <template v-if="item.render" #default="scope">
+                        <FieldRender
+                            :field="item"
+                            :row="scope.row"
+                            :column="scope.column"
+                            :index="scope.rowIndex"
+                            :key="
+                                key +
+                                '-' +
+                                item.render +
+                                '-' +
+                                (item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
+                            "
+                        />
+                    </template>
+                </Column>
+            </template>
+            <slot name="columns"></slot>
+        </vxe-table>
+    </div>
+
+    <div v-if="tableStore.showPage" class="table-pagination">
+        <el-pagination
+            :currentPage="tableStore.table.params!.pageNum"
+            :page-size="tableStore.table.params!.pageSize"
+            :page-sizes="pageSizes"
+            background
+            :layout="config.layout.shrink ? 'prev, next, jumper' : 'sizes,total, ->, prev, pager, next, jumper'"
+            :total="tableStore.table.total"
+            @size-change="onTableSizeChange"
+            @current-change="onTableCurrentChange"
+        ></el-pagination>
+    </div>
+    <slot name="footer"></slot>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, inject, computed, onMounted } from 'vue'
+import type { ElTable } from 'element-plus'
+import { VxeTableEvents, VxeTableInstance } from 'vxe-table'
+import FieldRender from '@/components/table/fieldRender/index.vue'
+import Column from '@/components/table/column/index.vue'
+import { useConfig } from '@/stores/config'
+import type TableStoreClass from '@/utils/tableStore'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+
+const config = useConfig()
+const tableRef = ref<VxeTableInstance>()
+const tableStore = inject('tableStore') as TableStoreClass
+
+interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
+    isGroup?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    isGroup: false
+})
+onMounted(() => {
+    tableStore.table.ref = tableRef.value as VxeTableInstance
+})
+console.log(props)
+const onTableSizeChange = (val: number) => {
+    tableStore.onTableAction('page-size-change', { size: val })
+}
+
+const onTableCurrentChange = (val: number) => {
+    tableStore.onTableAction('current-page-change', { page: val })
+}
+
+const pageSizes = computed(() => {
+    let defaultSizes = [10, 20, 50, 100]
+    if (tableStore.table.params!.pageSize) {
+        if (!defaultSizes.includes(tableStore.table.params!.pageSize)) {
+            defaultSizes.push(tableStore.table.params!.pageSize)
+        }
+    }
+    return defaultSizes
+})
+
+/*
+ * 记录选择的项
+ */
+const selectChangeEvent: VxeTableEvents.CheckboxChange<any> = ({ checked }) => {
+    const $table = tableRef.value
+    if ($table) {
+        const records = $table.getCheckboxRecords()
+        tableStore.onTableAction('selection-change', records)
+    }
+}
+
+const getRef = () => {
+    return tableRef.value
+}
+
+defineExpose({
+    getRef
+})
+</script>
+
+<style scoped lang="scss">
+.ba-data-table :deep(.el-button + .el-button) {
+    margin-left: 6px;
+}
+
+.ba-data-table :deep(.table-header-cell) .cell {
+    color: var(--el-text-color-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.table-pagination {
+    height: 58px;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    background-color: var(--ba-bg-color-overlay);
+    padding: 13px 15px;
+    border-left: 1px solid #e4e7e9;
+    border-right: 1px solid #e4e7e9;
+    border-bottom: 1px solid #e4e7e9;
+}
+</style>