tduck-front/src/views/project/my/index.vue

<template>
    <div class="my-project-container">
        <div class="filter-view">
            <div>
                <span @click="switchDataShowTypeHandle('gird')">
                    <font-icon
                        :class="{'show-view-type-icon-active':dataShowType=='gird'}"
                        class="fas fa-th-large show-view-type-icon "
                    />
                </span>
                <span @click="switchDataShowTypeHandle('table')">
                    <font-icon
                        :class="{'show-view-type-icon-active':dataShowType=='table'}"
                        class="fas  fa-th-list show-view-type-icon"
                    />
                </span>
            </div>
            <el-form ref="form" label-width="100px">
                <el-form-item label="项目更新时间">
                    <el-date-picker
                        v-model="queryParams.beginDateTime"
                        placeholder="选择开始时间"
                        style="width: 20%;"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                    />
                    至
                    <el-date-picker
                        v-model="queryParams.endDateTime"
                        :default-time="'23:59:59'"
                        placeholder="选择结束时间"
                        style="width: 20%;"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                    />
                    <el-input
                        v-model="queryParams.name"
                        placeholder="请输入项目名称" style="width: 20%; margin-left: 20px;" type="text"
                    />
                    <el-button class="ml-20" type="primary" @click="queryProjectPage">查询</el-button>
                </el-form-item>
                <el-form-item label="项目状态">
                    <el-radio-group v-model="queryParams.status" size="small" @change="()=>{
                        this.queryParams.current=0
                        this.queryProjectPage()
                    }"
                    >
                        <el-radio-button v-for="status in projectStatusList" :key="status.code" :label="status.code">
                            {{ status.name }}
                        </el-radio-button>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
        <div v-if="dataShowType=='gird'" class="project-grid-container">
            <div
                v-if="projectList.length"
                v-loading="projectListLoading"
                class="project-grid-view"
            >
                <div v-for="p in projectList" :key="p.id" class="project-grid-item-view pointer">
                    <el-row align="middle" justify="center" type="flex">
                        <el-col :span="5">
                            <span
                                :style="getStatusColorStyle(p.status)"
                                class="project-grid-view-status"
                            />
                        </el-col>
                        <el-col :span="19">
                            <el-tooltip :content="p.name" placement="top">
                                <p class="project-title">
                                    {{ p.name }}
                                </p>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                    <img class="project-grid-view-preimg"
                         src="data:image/png;base64,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
                    >
                    <p class="project-grid-view-time">创建时间：{{ p.createdTime | formatDate }}</p>
                    <div class="gird-operating-btns">
                        <el-button type="text" @click="toProjectHandle(p.key,'editor')">
                            <i class="el-icon-edit" />
                            编辑
                        </el-button>
                        <span>
                            <el-button
                                v-if="p.status!=1" type="text" @click="toProjectHandle(p.key,'statistics')"
                            >
                                <i class="el-icon-data-analysis" />
                                统计
                            </el-button>
                        </span>
                        <el-popconfirm
                            v-if="p.status==2"
                            title="确定停止收集该项目吗？"
                            @confirm="stopProject(p.key)"
                        >
                            <el-button slot="reference"
                                       class="pink-text-btn"
                                       type="text"
                            >
                                <i class="el-icon-video-pause" />
                                停止
                            </el-button>
                        </el-popconfirm>
                        <el-popconfirm
                            v-if="p.status!=2"
                            title="确定删除该项目吗？"
                            @confirm="deleteProject(p.key)"
                        >
                            <el-button slot="reference"
                                       class="pink-text-btn"
                                       type="text"
                            >
                                <i class="el-icon-delete" />
                                删除
                            </el-button>
                        </el-popconfirm>
                    </div>
                </div>
            </div>
            <div v-if="!projectListLoading&&projectList.length==0">
                <data-empty />
            </div>
        </div>
        <div v-if="dataShowType=='table'" class="project-table-view">
            <el-table
                :data="projectList"
                border
                empty-text="暂无数据"
                highlight-current-row

                stripe
                style="width: 100%;"
            >
                <el-table-column
                    align="center"
                    label="标题"
                    prop="name"
                    show-overflow-tooltip
                />
                <el-table-column
                    align="center"
                    label="描述"
                    prop="describe"
                    show-overflow-tooltip
                />
                <el-table-column
                    align="center"
                    label="状态"
                >
                    <template slot-scope="scope">
                        <span v-for="status in projectStatusList" :key="status.code">
                            <span
                                v-if="status.code==scope.row.status"
                            >
                                {{ status.name }}
                            </span>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    label="创建时间"
                    prop="createdTime"
                />
                <el-table-column
                    align="center"
                    label="更新时间"
                    prop="updatedTime"
                />
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text"
                                   @click="toProjectHandle(scope.row.key,'editor')"
                        >
                            编辑
                        </el-button>
                        <span>
                            <el-button
                                v-if="scope.row.status!=1"
                                class="green-text-btn"
                                type="text"
                                @click="toProjectHandle(scope.row.key,'statistics')"
                            >
                                统计
                            </el-button>
                        </span>
                        <el-popconfirm
                            v-if="scope.row.status==2"
                            title="确定停止收集该项目吗？"
                            @confirm="stopProject(scope.row.key)"
                        >
                            <el-button slot="reference"
                                       class="pink-text-btn"
                                       type="text"
                            >
                                停止
                            </el-button>
                        </el-popconfirm>
                        <el-popconfirm
                            v-if="scope.row.status!=2"
                            title="确定删除该项目吗？"
                            @confirm="deleteProject(scope.row.key)"
                        >
                            <el-button slot="reference"
                                       class="pink-text-btn"
                                       type="text"
                            >
                                删除
                            </el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="project-page-view">
            <el-pagination
                v-if="total>10"
                :current-page.sync="queryParams.current"
                :page-size.sync="queryParams.size"
                :total="total"
                background
                layout="total, prev, pager, next"
                @current-change="queryProjectPage"
            />
        </div>
    </div>
</template>
<script>
import dayjs from 'dayjs'

let projectStatusList = [
    {code: 1, name: '未发布', color: '#006EFF'},
    {code: 2, name: '收集中', color: '#34C82A'},
    {code: 3, name: '已结束', color: '#955A45'}
]

export default {
    name: 'MyProject',
    filters: {
        formatDate(time) {
            return dayjs(time).format('YYYY/MM/DD')
        }
    },
    data() {
        return {
            dataShowType: 'gird',
            total: 0,
            queryParams: {
                current: 1,
                size: 10,
                name: '',
                beginDateTime: null,
                endDateTime: null,
                status: null
            },
            projectStatusList: projectStatusList,
            projectList: [],
            projectListLoading: true
        }
    },
    computed: {
        getStatusColorStyle() {
            return function(code) {
                let color = this.projectStatusList.find(item => item.code == code).color
                return {
                    backgroundColor: color,
                    borderColor: color
                }
            }
        }
    },
    created() {
        this.queryProjectPage()
    },
    methods: {
        switchDataShowTypeHandle(type) {
            this.dataShowType = type
        },
        toProjectHandle(key, type) {
            this.$router.push({path: `/project/form/${type}`, query: {key: key, active: type}})
        },
        deleteProject(key) {
            this.$api.post('/user/project/delete', {'key': key}).then(res => {
                if (res.data) {
                    this.msgSuccess('刪除成功')
                    this.queryProjectPage()
                }
            })
        },
        stopProject(key) {
            this.$api.post('/user/project/stop', {'key': key}).then(res => {
                if (res.data) {
                    this.msgSuccess('停止成功')
                    this.queryProjectPage()
                }
            })
        },
        queryProjectPage() {
            this.$api.get('/user/project/page', {
                params: this.queryParams
            }).then(res => {
                let {records, total, size} = res.data
                this.projectList = records
                this.total = total
                this.queryParams.size = size
                this.projectListLoading = false
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.my-project-container {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    align-content: center;
}
.back-view {
    display: flex;
    width: 80%;
    align-content: flex-start;
    margin: 10px;
}
.filter-view {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
}
.show-view-type-icon {
    color: white;
    font-size: 18px;
    -webkit-text-stroke: 0.5px #a8a8a8;
    margin: 5px;
    cursor: pointer;
}
.show-view-type-icon-active {
    color: rgba(92, 155, 249, 100);
    -webkit-text-stroke: 0.5px rgba(92, 155, 249, 100);
}
.project-grid-container {
    margin-top: 20px;
    display: flex;
    width: 100%;
    justify-content: center;
}
.project-grid-view {
    display: flex;
    width: 950px;
    flex-direction: row;
    flex-wrap: wrap;
}
.project-table-view {
    margin-top: 20px;
    width: 80%;
}
.project-grid-item-view {
    width: 169px;
    height: 199px;
    line-height: 20px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 100);
    text-align: center;
    margin: 10px;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    .project-title {
        color: rgba(16, 16, 16, 100);
        font-size: 14px;
        text-align: left;
        line-height: 20px;
        max-height: 20px;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .project-grid-view-status {
        display: inline-block;
        width: 7px;
        height: 7px;
        line-height: 20px;
        background-color: rgba(0, 110, 255, 100);
        text-align: center;
        border: 1px solid rgba(0, 110, 255, 100);
        border-radius: 20px;
    }
}
.gird-operating-btns {
    position: absolute;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    bottom: 0;
    display: none;
    border: none;
}
.project-grid-item-view:hover .gird-operating-btns {
    display: block;
}
.project-grid-view-preimg {
    width: 143px;
    height: 121px;
}
.project-grid-view-time {
    color: rgba(144, 147, 153, 100);
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    margin: 0;
}
.project-page-view {
    margin-top: 30px;
}
</style>