ChuangHeng_new/src/views/modules/agent/questionnaireList.vue

<template>
    <div class="page">
        <div class="top adfacjb">
            <div class="t_l">
                <p>问卷管理</p>
                <p class="tip">创建和管理PERILL评估问卷</p>
            </div>
            <div class="t_r">
                <el-button type="primary" icon="el-icon-plus">新增问卷</el-button>
            </div>
        </div>
        <div class="query adfacjb">
            <el-input placeholder="搜索问卷" prefix-icon="el-icon-search" v-model="queryParams.name" style="width: calc(100% - 448px);"></el-input>
            <el-select v-model="queryParams.type" placeholder="全部类型" style="width: 200px;"></el-select>
            <el-select v-model="queryParams.sort" placeholder="排序方式" style="width: 200px;"></el-select>
        </div>
        <div class="list">
            <el-table :data="dataList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无问卷" max-height="578px">
                <el-table-column label="序号" width="50">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column label="问卷标题" prop="aaa"></el-table-column>
                <el-table-column label="创建人" prop="aaa"></el-table-column>
                <el-table-column label="创建时间" prop="aaa"></el-table-column>
                <el-table-column label="问卷类型" prop="aaa"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button link type="text" size="mini" @click="handleRelease(scope.row)">发布问卷</el-button>
                        <el-button link type="text" size="mini" @click="handleDetail(scope.row)">详情</el-button>
                        <el-button link type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row style="display: flex;justify-content: center;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryParams.page"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    v-show="total > 0">
                </el-pagination>
            </el-row>
        </div>
    </div>
</template>

<script setup name="">
    import { ref, getCurrentInstance } from 'vue'
    const { proxy } = getCurrentInstance();
    
    const queryParams = ref({
        page:1,
        limit:10,
        name: '',
        type: '',
        sort: ''
    })
    const dataList = ref([1,2,3])
    const total = ref(0)
    const loading = ref(false)


    const getList = async () => {
        let query = {...queryParams.value};
        loading.value = true;
        // const res = await listOrder(query);
        // userList.value = res.data.list;
        // total.value = res.data.total;
        loading.value = false;
    }
    const handleSizeChange = (e)=>{
        queryParams.value.limit = e;
        getList();
    }
    const handleCurrentChange = (e)=>{
        queryParams.value.page = e;
        getList();
    }

    const handleRelease = row => {
        proxy.$router.push({path:'/agentQuestionnairePublish'});
    }
    const handleDetail = row => {
        proxy.$router.push({path:'/agentQuestionnaireDetail'});
    }
    const handleDelete = row => {
        proxy.$confirm('确定删除该问卷吗？', '提示', {
            confirmButtonText: '确定',
            confirmButtonColor:'#761E6A',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            
        })
    }
</script>

<style scoped lang="scss">
    
    .page{
        padding: 28px 20px;
        background: #FAFAFA;
        
        .top{
            .t_l{
                p{
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: bold;
                    font-size: 16px;
                    color: #252525;
                    line-height: 16px;
                    &.tip{
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #6B7280;
                        line-height: 14px;
                        margin-top: 16px;
                    }

                }
            }
        }

        .query{
            width: 100%;
            padding: 16px 20px;
            box-sizing: border-box;
            background: #FFFFFF;
            border-radius: 6px;
            border: 1px solid #F3F4F6;
            margin-top: 16px;
        }
        
        .list{
            width: 100%;
            height: calc(100vh - 204px);
            background: #FFFFFF;
            overflow-y: auto;
            margin-top: 12px;
        }
    }
</style>