feat: 增加主题配色、增加组件

zhangnuoyan

2024-08-24 392765e4c6823745345fe349e5422e1b98ca8f09

 src/views/oneThree/comprehensive/index.vue

@@ -8,82 +8,126 @@
                :icon="item.icon"
                :unit="item.unit"
                :metering="item.metering"
                :colorBg="item.colorBg"
                :color-bg="item.colorBg"
            ></the-icon-card>
        </div>
        <div></div>
        <div class="menus">
            <the-a-cascader :data="cascaderData" placeholder="请选择" title="区域"></the-a-cascader>
            <div><the-a-search placeholder="请输入" title="搜索"></the-a-search></div>
            <div><the-a-change :data="changeData" default-value="custom"></the-a-change></div>
            <div><a-time-picker type="time-range" style="width: 250px" /></div>
        <div>
                <a-button type="primary">
                    <template #icon>
                        <icon-search />
                    </template>
                    <template #default>搜索</template>
                </a-button>
            </div>
            <div>
                <a-button>
                    <template #icon>
                        <icon-refresh />
                    </template>
                    <template #default>重置</template>
                </a-button>
            </div>
        </div>
        <div class="main">
            <the-box-card
                v-for="(item, index) in list"
                :id="item.id"
                :key="item.id"
                :icon="item.icon"
                :title="item.title"
                :unitTitle="item.unitTitle"
                :unitNum="item.unitNum"
                :unit-title="item.unitTitle"
                :unit-num="item.unitNum"
                :unit="item.unit"
                :id="item.id"
                :name="item.name"
                :notName="item.notName"
                :not-name="item.notName"
                :hire="item.hire"
                :vacant="item.vacant"
                :selfOccupation="item.selfOccupation"
                :self-occupation="item.selfOccupation"
                :service="item.service"
                :closes="item.closes"
                @handleClick="handleClick(item)"
                @handleDetails="handleDetails(item)"
            ></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 />
            <a-pagination :total="50" show-total show-jumper show-page-size style="margin-top: 8px" />
        </div>
    </div>
</template>

<script lang="ts" setup name="comprehensive">
import { useTheme } from "@/hooks/useTheme";
import { Svg } from "@easyfe/admin-component";

const { themeModeOptions, currentThemeMode, handleThemeChange } = useTheme();
const changeData = reactive([
    {
        name: "1天",
        value: "1"
    },
    {
        name: "2天",
        value: "2"
    },
    {
        name: "3天",
        value: "3"
    },
    {
        name: "自定义",
        value: "custom"
    }
]);
const cascaderData = reactive([
    {
        value: "beijing",
        label: "Beijing",
        children: [
            {
                value: "chaoyang",
                label: "ChaoYang",
                children: [
                    {
                        value: "datunli",
                        label: "Datunli"
                    }
                ]
            },
            {
                value: "haidian",
                label: "Haidian"
            },
            {
                value: "dongcheng",
                label: "Dongcheng"
            },
            {
                value: "xicheng",
                label: "Xicheng",
                children: [
                    {
                        value: "jinrongjie",
                        label: "Jinrongjie"
                    },
                    {
                        value: "tianqiao",
                        label: "Tianqiao"
                    }
                ]
            }
        ]
    },
    {
        value: "shanghai",
        label: "Shanghai",
        children: [
            {
                value: "huangpu",
                label: "Huangpu"
            }
        ]
    }
]);
const dataList = reactive([
    {
        title: "实有房屋",
@@ -189,36 +233,6 @@
    // 更多列...
];

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);
};
@@ -229,7 +243,25 @@

<style lang="scss" scoped>
.comprehensive {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
    .menus {
        background: var(--color-bg-2);
        margin-top: 8px;
        padding: 14px 20px;
        display: flex;
        > div {
            margin-left: 20px;
        }
    }
    .main {
        padding: 8px 20px;
        background: var(--color-bg-2);
        margin-top: 8px;
        flex: 1;
    }
    .top-title {
        display: flex;
    }