From 3a28df1eccec424a37649cca968bce59739e0b35 Mon Sep 17 00:00:00 2001
From: zhangxiao <898441624@qq.com>
Date: 星期五, 23 八月 2024 18:55:10 +0800
Subject: [PATCH] fix: table修改
---
src/views/oneThree/comprehensive/index.vue | 117 ++++++++++++++
src/views/components/the-box-card/index.vue | 3
src/views/components/the-icon-card/index.vue | 1
src/views/components/the-img-card/index.vue | 131 ++++++++++++++++
src/views/components/the-a-table/index.vue | 171 +++++++++++++++++++++
src/styles/transition.scss | 9 +
6 files changed, 432 insertions(+), 0 deletions(-)
diff --git a/src/styles/transition.scss b/src/styles/transition.scss
index 35753e4..67acbba 100644
--- a/src/styles/transition.scss
+++ b/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;
diff --git a/src/views/components/the-a-table/index.vue b/src/views/components/the-a-table/index.vue
new file mode 100644
index 0000000..f30be7a
--- /dev/null
+++ b/src/views/components/the-a-table/index.vue
@@ -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>
diff --git a/src/views/components/the-box-card/index.vue b/src/views/components/the-box-card/index.vue
index d6fa661..9fc2dc9 100644
--- a/src/views/components/the-box-card/index.vue
+++ b/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;
diff --git a/src/views/components/the-icon-card/index.vue b/src/views/components/the-icon-card/index.vue
index d6811c4..59e36f7 100644
--- a/src/views/components/the-icon-card/index.vue
+++ b/src/views/components/the-icon-card/index.vue
@@ -1,4 +1,5 @@
<template>
+ <!-- 甯con棣栭〉 -->
<div class="icon-card" :class="currentThemeMode === 'dark' ? 'card-dark' : ''">
<a-card class="card-box">
<div class="card-icon" :style="dynamicStyle">
diff --git a/src/views/components/the-img-card/index.vue b/src/views/components/the-img-card/index.vue
new file mode 100644
index 0000000..da5365d
--- /dev/null
+++ b/src/views/components/the-img-card/index.vue
@@ -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>
diff --git a/src/views/oneThree/comprehensive/index.vue b/src/views/oneThree/comprehensive/index.vue
index f8c8eb8..eda980c 100644
--- a/src/views/oneThree/comprehensive/index.vue
+++ b/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>
--
Gitblit v1.8.0