item-management-web/src/views/reports/section/list.vue

<template>
    <div class="app-container">
        <div class="title-container">
            <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
        </div>

        <y-page-list-layout :page-list="pageData" :page-para="listQuery" :get-page-list="getList">
            <template slot="left">
                <el-button class-name="filter-item" type="primary" size="mini" round style="float: left">新增</el-button>
                <el-input v-model="listQuery.name" placeholder="模板名称" clearable style="margin-left: 20px; width: 320px;float: left;">
                </el-input>
                <el-select v-model="listQuery.reportType" placeholder="报告类型" clearable filterable
                    style="margin-left: 20px;width: 320px;float: left;" class="filter-item">
                    <el-option v-for="item in reportTypes" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                <el-select v-model="listQuery.reportHeadline" placeholder="报告标题" clearable filterable
                    style="margin-left: 20px;width: 320px;float: left;" class="filter-item">
                    <el-option v-for="item in reportHeadlines" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                <el-button class="filter-item" style="margin-left: 10px;float: left;" type="primary" @click="searchList"
                    round>搜索
                </el-button>
                <el-button class="filter-item" style="float: left;" round type="warning" @click="resetSearch()">重置
                </el-button>
            </template>
            <parentTable v-loading="listLoading" :data="pageData.records" slot="table" style="width: 100%;">
                <el-table-column label="模板名称" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="所属报告类型" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.reportType }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="所属报告标题" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.reportHeadline }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="段落内容" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.section }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建人" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.userName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.created }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="200">
                    <template slot-scope="{row}">
                        <!-- <PermissionButton
                menu-code="_views_log_detail"
                class-name="filter-item"
                name=""
                type="primary"
                :page-jump="true"
                :page-query="{id: row.id,stageName:row.stageName,listQuery:listQuery}"
                round
                size="mini"
              />
              <PermissionButton
                menu-code="_views_log_remove"
                class-name="filter-item"
                name=""
                type="danger"
                round
                size="mini"
                @click="deleteInfo(row.id)"
              /> -->
                    </template>
                </el-table-column>
            </parentTable>
        </y-page-list-layout>
    </div>
</template>
<script>
import YPageListLayout from '@/components/YPageListLayout'
import Breadcrumb from '@/components/Breadcrumb'
import PermissionButton from '@/components/PermissionButton/PermissionButton'

export default {
    name: 'ReportSection',
    components: {
        Breadcrumb,
        YPageListLayout,
        PermissionButton,
    },
    data() {
        return {
            pageData: { records: [] },
            total: 20,
            listLoading: true,
            listQuery: {
                page: 1,
                size: 10,
                // name: '',
                // staffNo: '',
                descs: 'id',
            },
            listQueryKey: 'keyword',
            reportHeadline: [],
            reportTypes: []
        }
    },
    created() {
        this.getList()
    },
    methods: {
        resetSearch() {
            this.$router.push({ query: {} });
            this.listQuery = {
                current: 1,
                size: 10,
                descs: 'id',
            }
            this.getList()
        },
        searchList() {
            // 重置分页
            this.listQuery.page = 1
            this.listQuery.size = 20
            this.getList()
        },
        getList() {
            const that = this
            this.listLoading = true
            const key = {}
            this.$api.reportSection.list(Object.assign({}, that.listQuery, key)).then((res) => {
                that.pageData = res.data
                setTimeout(() => {
                    that.listLoading = false
                }, 200)
            })
                .catch(() => {
                    that.listLoading = false
                })
        },
        deleteInfo(id) {
            const that = this
            that.$confirm('请确认是否删除该数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                that.$api.reportSection.delete(id).then(data => {
                    that.loading = false
                    if (data.code === 200) {
                        that.getList()
                    } else {
                        this.$message({
                            type: 'error',
                            message: data.msg
                        })
                    }
                })
            }).catch(() => {
            })
        }
    },
}
</script>
<style lang="scss" scoped>
.right {
    flex: 1;

    .title {
        font-size: 16px;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 35px;
        margin-bottom: 8px;
    }

    .menu-2-box {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .menu-2-item {
        display: flex;
        align-items: center;
        color: #656565;
        font-size: 12px;
        width: 230px;
        height: 101px;
        background: rgb(255, 185, 129);
        border-radius: 3px;
        padding-left: 20px;
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

        .text {
            margin-left: 16px;
        }
    }
}
</style>