fix: table修改

zhangxiao

2024-08-23 3a28df1eccec424a37649cca968bce59739e0b35

fix: table修改

 src/styles/transition.scss

@@ -40,6 +40,15 @@
.fade-transform-enter-active {
    transition: all 0.5s;
}
.overSpread1 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0);
    z-index: 10;
}

.fade-transform-enter {
    opacity: 0;

 src/views/components/the-a-table/index.vue

New file
@@ -0,0 +1,171 @@
<template>
    <!-- 表格 -->
    <div class="the-a-table" :class="currentThemeMode === 'dark' ? 'a-table-dark' : ''">
        <div class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div>
        <div class="table-select" v-if="colOpenShow">
            <div class="select-box">
                <icon-list class="box-icon" @click="checkcol" :size="24" />
                <a-scrollbar
                    class="box-scrollbar"
                    type="track"
                    style="height: 200px; overflow: auto"
                    v-show="iscolopen"
                >
                    <a-space class="box-post" direction="vertical" size="large">
                        <a-checkbox-group direction="vertical" @change="selCeckBoxList" v-model="checkedValue">
                            <a-checkbox v-for="(item, index) in columns" :value="item.title" :key="index">
                                {{ item.title }}
                            </a-checkbox>
                        </a-checkbox-group>
                    </a-space>
                </a-scrollbar>
            </div>
        </div>
        <a-space direction="vertical" size="large" fill>
            <a-table
                row-key="id"
                :loading="loading"
                :pagination="pagination"
                :data="data"
                :columns="tableColumns"
                :bordered="bordered"
                :size="size"
                @page-change="onPageChange"
                :max-height="documentHeight"
                :scroll="{ x: 1000 }"
                :row-selection="rowSelection"
                @select-all="selectTabAll"
                @selection-change="selectTabChange"
            >
                <!-- <template #columns>
                    <a-table-column
                        v-for="(list, index) in columns"
                        :key="list.key"
                        :title="list.title"
                        :dataIndex="list.dataIndex"
                    >
                    </a-table-column>
                </template> -->
                <template v-for="(item, key, i) in slots" :key="i" v-slot:[key]="{ record, rowIndex, column }">
                    <slot :name="key" v-bind="{ rowIndex: rowIndex, record: record, column: column }"></slot>
                </template>
            </a-table>
        </a-space>

        <!-- <a-select v-model="selectedColumns" mode="multiple" :options="allColumns" @change="handleColumnsChange" /> -->
    </div>
</template>
<script lang="ts" setup name="TheIconCard">
import { useTheme } from "@/hooks/useTheme";
import { Svg } from "@easyfe/admin-component";
import { useSlots } from "vue";

const slots = useSlots();

const { themeModeOptions, currentThemeMode, handleThemeChange } = useTheme();

const props = withDefaults(
    defineProps<{
        columns?: Array<any>;
        data?: Array<any>;
        colOpenShow?: boolean;
        loading?: boolean;
        pagination?: boolean;
        checkedValue?: Array<any>;
        bordered?: boolean;
        showSelection?: boolean;
    }>(),
    {
        columns: () => [], //表头
        data: () => [], //数据
        colOpenShow: true, // 配置列表 表头
        loading: false,
        pagination: false,
        checkedValue: () => [],
        bordered: true,
        showSelection: false
    }
);

const emits = defineEmits<{
    (e: "selTableCol", data: object): void;
}>();

const iscolopen = ref(false);
const checkedAll = ref(false);
const checkedArr = ref([]);
const checkedValue = computed(() => props.checkedValue);
const tableColumns = computed(() => {
    return props.columns.filter((item) => {
        return checkedValue.value.includes(item.title);
    });
});
const data = computed(() => props.data);
const loading = computed(() => props.loading);
// const pagination = computed(() => props.pagination);

const checkcol = () => {
    iscolopen.value = !iscolopen.value;
};
const onMaskClick = () => {
    iscolopen.value = false;
};

const showSelection = computed(() => props.showSelection);

const rowSelection = showSelection.value
    ? {
          type: "checkbox",
          showCheckedAll: true,
          onlyCurrent: false

          // onChange: (selectedRowKeys: any, selectedRows: any) => {}
      }
    : "";

//下拉选择
const selCeckBoxList = (val: any) => {
    console.log(val);
    emits("selTableCol", val);
};

const selectTabAll = (val: any) => {
    console.log(val, "全选");
    checkedAll.value = val;
};
const selectTabChange = (val: any) => {
    console.log(val, "单选");
    checkedArr.value = val;
};
</script>
<style lang="scss" scoped>
.a-table-dark {
}

.table-select {
    display: flex;
    justify-content: flex-end;
    // margin-bottom: 10px;
    cursor: pointer;
    .select-box {
        position: relative;
        .box-post {
            // position: absolute;
            // top: 20px;
            // right: 0px;
            // z-index: 1;
            padding: 10px;
            width: 180px;
            // height: 200px;
            // background-color: var(--color-bg-3);
            // border-radius: 4px;
        }
        :deep(.box-scrollbar) {
            position: absolute !important;
            background-color: var(--color-bg-3) !important;
            right: 0px;
            z-index: 100;
        }
    }
}
</style>

 src/views/components/the-box-card/index.vue

@@ -1,4 +1,5 @@
<template>
    <!-- 小卡片 -->
    <div class="the-box-card" :class="currentThemeMode === 'dark' ? 'box-card-dark' : ''">
        <a-card class="card-box">
            <div class="card-title">
@@ -155,6 +156,7 @@
        .card-more {
            color: var(--color-text-3);
            font-size: 14px;
            cursor: pointer;
        }
    }
    .card-content {
@@ -170,6 +172,7 @@
            border-radius: 5px;
            padding: 10px;
            line-height: 26px;
            cursor: pointer;
            .card-box-title {
                display: flex;
                justify-content: space-between;

 src/views/components/the-icon-card/index.vue

@@ -1,4 +1,5 @@
<template>
    <!-- 带icon首页 -->
    <div class="icon-card" :class="currentThemeMode === 'dark' ? 'card-dark' : ''">
        <a-card class="card-box">
            <div class="card-icon" :style="dynamicStyle">

 src/views/components/the-img-card/index.vue

New file
@@ -0,0 +1,131 @@
<template>
    <!-- 带头像首页 -->
    <div class="the-img-card" :class="currentThemeMode === 'dark' ? 'card-img-dark' : ''">
        <div class="img-box-card">
            <div class="card-icon" :style="dynamicStyle">
                <a-image
                    width="140"
                    height="140"
                    border-radius="14px"
                    :preview="false"
                    src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
                />
            </div>
            <div class="card-content">
                <div class="card-content-top">
                    <div class="card-name">
                        <span class="name">张三</span>
                        <icon-woman v-if="sex && sex === 'woman'" />
                        <icon-man v-if="!sex && sex === 'woman'" />
                    </div>
                    <div @click="handleChange" class="card-detail">详情 ></div>
                </div>
                <div>
                    <span>人员编号</span>：
                    <span>H324343</span>
                </div>
                <div>
                    <span>出现天数</span>：
                    <span>2天</span>
                </div>
                <div>
                    <span>居住地址</span>：
                    <span>经济快速等级考试</span>
                </div>
                <div>
                    <span>身份证号</span>：
                    <span>3673672627722</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup name="TheIconCard">
import { useTheme } from "@/hooks/useTheme";
import { Svg } from "@easyfe/admin-component";

const { themeModeOptions, currentThemeMode, handleThemeChange } = useTheme();
const props = withDefaults(
    defineProps<{
        icon?: string;
        title?: string;
        unit?: string;
        metering?: number;
        colorBg?: string;
        sex?: boolean;
        isIcon?: boolean;
    }>(),
    {
        icon: "",
        title: "",
        unit: "",
        metering: 0,
        colorBg: "#fff",
        sex: true,
        isIcon: true
    }
);

const colorBg = computed(() => {
    return props.colorBg;
});
const dynamicStyle = {
    backgroundColor: colorBg.value // 动态背景色
};

const emits = defineEmits<{
    (e: "handleChange", data: object): void;
}>();
const handleChange = (item: any) => {
    emits("handleChange", item);
    console.log("handleChange", item);
};
</script>
<style lang="scss" scoped>
.card-img-dark {
    .card-box {
        display: flex;
        align-items: center;
        // justify-content: center;
    }
}
.the-img-card {
    width: 100%;
    border-radius: 4px;
    box-sizing: border-box;
    .img-box-card {
        display: flex;
        align-items: center;
        width: 100%;
        // justify-content: center;
        .card-icon {
            width: 140px;
            height: 140px;
            border-radius: 20px;
        }
    }

    .card-content {
        margin-left: 10px;
        line-height: 24px;
        color: var(--color-text-1);
        font-size: 12px;
        width: 100%;
        .card-content-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .card-name {
            font-size: 16px;
            .name {
                margin-right: 4px;
            }
        }
        // .metering {
        //     font-size: 14px;
        //     margin-right: 4px;
        // }
    }
}
</style>

 src/views/oneThree/comprehensive/index.vue

@@ -34,6 +34,46 @@
            ></the-box-card>
        </div>
        <div>
            <a-card class="card-box">
                <the-img-card></the-img-card>
                <div class="card-box-right">
                    <div>
                        <a-space>
                            <a-button type="primary" size="mini">上访</a-button>
                            <a-button type="primary" status="danger" size="mini">涉毒</a-button>
                        </a-space>
                    </div>

                    <div>
                        <a-space>
                            <icon-book />
                            <icon-bar-chart />
                        </a-space>
                    </div>
                </div>
            </a-card>
        </div>
        <div>
            <the-a-table
                :columns="columns"
                :data="data"
                :pagination="false"
                :checkedValue="checkedValue"
                :colOpenShow="true"
                :showSelection="false"
                @selTableCol="selTableCol"
            >
                <template #index="{ record, rowIndex, column }">
                    {{ rowIndex + 1 }}
                </template>
                <template #action="{ record, rowIndex, column }">
                    <a-button type="text" size="small">查看</a-button>
                    <a-button type="text" size="small">管理</a-button>
                    <a-button type="text" size="small">关闭</a-button>
                </template>
            </the-a-table>
        </div>
        <div>
            <a-pagination :total="50" show-total show-jumper show-page-size />
        </div>
    </div>
@@ -113,6 +153,72 @@
        closes: 54
    }
]);

//列表
const columns = [
    {
        title: "序号",
        key: "1",
        dataIndex: "index",
        slotName: "index",
        width: 80
    },
    {
        title: "Name",
        dataIndex: "name",
        key: "2"
    },
    {
        title: "Address",
        dataIndex: "address",
        key: "3"
    },
    {
        title: "Email",

        dataIndex: "email",
        key: "4"
    },
    {
        title: "操作",
        key: "5",
        slotName: "action",
        width: 200
    }

    // 更多列...
];

const checkedValue = ref<string[]>(["序号", "Name", "Email", "操作"]);

// const onChange = (checkedValues: string[]) => {
//     console.log("checked = ", checkedValues);
//     checkedValue.value = checkedValues;
// };

const data = [
    {
        id: "1",
        name: "John Doe",
        age: 32,
        email: "john@example.com",
        address: "New York No. 1 Lake Park"
    },
    {
        id: "2",
        name: "Jane Smith",
        age: 28,
        email: "jane@example.com",
        address: "London No. 1 Lake Park"
    }
    // 更多数据项...
];

const selTableCol = (val: any) => {
    checkedValue.value = val;
    console.log(val);
};

const handleClick = (item: any) => {
    console.log(item, 888);
};
@@ -123,8 +229,19 @@

<style lang="scss" scoped>
.comprehensive {
    padding: 20px;
    .top-title {
        display: flex;
    }
    .card-box {
        width: 391px;
        height: 202px;
        border-radius: 5px;
    }
    .card-box-right {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
    }
}
</style>