admin/src/views/project/list.vue

<template>
    <hc-new-card v-loading="tableLoading" id-ref="hc-project-list" div-p="12px" scrollbar>
        <template #header>
            <div class="w-[354px]">
                <el-select v-model="projectId" filterable clearable block placeholder="选择项目" @change="projectClick">
                    <el-option v-for="item in projectData" :key="item.id" :label="item.projectAlias" :value="item.id" />
                </el-select>
            </div>
        </template>
        <template #extra>
            <el-button hc-btn type="primary" @click="addProjectClick">创建项目</el-button>
        </template>
        <hc-card-item v-for="item in tableData" :key="item.id" class="hc-project-list-card" @click="projectClick(item.id)">
            <div class="alias">{{ item.projectAlias }}</div>
            <div class="name">{{ item.projectName }}</div>
            <div class="footer">
                <div class="id">{{ item.id }}</div>
                <div class="time">{{ item.updateTime }}</div>
            </div>
        </hc-card-item>
        <template #action>
            <hc-pages :pages="searchForm" @change="pageChange" />
        </template>
        <!-- 查看项目信息 -->
        <InfoDialog v-model="isProjectInfoDialog" :ids="projectInfoId" />
        <!-- 创建或编辑项目信息 -->
        <hc-new-drawer v-model="isProjectDrawer" is-close to-id="hc-project-list">
            创建或编辑项目信息
        </hc-new-drawer>
    </hc-new-card>
</template>

<script setup>
import { nextTick, onActivated, ref } from 'vue'
import { getArrValue } from 'js-fast-way'
import InfoDialog from './modules/list/info-dialog.vue'
import mainApi from '~api/project/project'

defineOptions({
    name: 'ProjectList',
})

//激活
onActivated(() => {
    getDataApi()
})

const getDataApi = async () => {
    await getProjectData()
    searchClick()
}

//项目列表
const projectData = ref([])
const projectId = ref('')
const getProjectData = async () => {
    const { data } = await mainApi.page({
        current: 1,
        size: 999,
    })
    projectData.value = getArrValue(data?.records)
}

//搜索条件
const searchForm = ref({ current: 1, size: 20, total: 0 })

//搜索
const searchClick = () => {
    searchForm.value.current = 1
    getTableData()
}

//分页
const pageChange = ({ current, size }) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//项目数据
const tableData = ref([])
//获取表格数据
const tableLoading = ref(true)
const getTableData = async () => {
    tableData.value = []
    tableLoading.value = true
    const { error, code, data } = await mainApi.page({
        ...searchForm.value,
        total: null,
    })
    tableLoading.value = false
    if (!error && code === 200) {
        tableData.value = getArrValue(data['records'])
        searchForm.value.total = data['total']
    } else {
        tableData.value = []
        searchForm.value.total = 0
    }
}

//查看项目信息
const isProjectInfoDialog = ref(false)
const projectInfoId = ref('')

//项目被选择
const projectClick = (id) => {
    projectInfoId.value = id
    nextTick(() => {
        isProjectInfoDialog.value = true
    })
}

//创建项目或修改项目
const isProjectDrawer = ref(false)
const projectDrawerId = ref('')

//创建项目
const addProjectClick = () => {
    projectDrawerId.value = ''
    nextTick(() => {
        isProjectDrawer.value = true
    })
}
</script>

<style lang="scss">
.hc-card-item-box.hc-project-list-card {
    width: 354px;
    height: 120px;
    display: inline-block;
    border-radius: 4px;
    margin-right: 14px;
    margin-bottom: 14px;
    cursor: pointer;
    background: #f3f3f3 !important;
    transition: all 0.3s;
    .alias {
        font-size: 16px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .name {
        font-size: 14px;
        color: #747474;
        margin-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;  /* 超出部分省略号 */
        word-break: break-all;  /* 设置省略字母数字 */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 显示的行数 */
    }
    .footer {
        position: absolute;
        color: #747474;
        display: flex;
        align-items: center;
        font-size: 14px;
        justify-content: space-between;
        bottom: 0;
        width: 100%;
    }
    &:hover {
        box-shadow: 2px 2px var(--el-color-primary-light-7);
    }
}
</style>