|
|
@@ -1,7 +1,88 @@
|
|
|
<template>
|
|
|
<div ref="courseDom" class="main_container">
|
|
|
<div class="page_item end_item">
|
|
|
-
|
|
|
+ <div class="page_search">
|
|
|
+ <div class="search_content">
|
|
|
+ <div class="conent_left">
|
|
|
+ <TabSearch
|
|
|
+ :tabList="viewModeTabList"
|
|
|
+ tabType="box"
|
|
|
+ :defaultTabKey="defaultViewMode"
|
|
|
+ @tabChange="HandleTabChage"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="conent_right">
|
|
|
+ <el-button class="button_background">创建问卷</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="page_jg_20"></div>
|
|
|
+
|
|
|
+ <!-- 视图展示数据 -->
|
|
|
+ <ul v-if="defaultViewMode == 'view'" class="questionnaire_list">
|
|
|
+ <li v-for="quesitonnaire in questionnaireList" :key="quesitonnaire.id" class="card_item">
|
|
|
+ <!-- 顶部区域：图标 + 标题 -->
|
|
|
+ <div class="card_header">
|
|
|
+ <!-- 模拟图片中的文档图标 -->
|
|
|
+ <img src="" alt="" class="card-icon" />
|
|
|
+ <span class="card_title two_line_ellipsis">{{ quesitonnaire.title }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 中间区域：元数据 (分数、创建人、状态、时间) -->
|
|
|
+ <div class="card_meta">
|
|
|
+ <div class="meta_row">
|
|
|
+ <span class="score_text">{{ quesitonnaire.totalScore }}分</span>
|
|
|
+ <span class="creator_text">管理员</span>
|
|
|
+ <!-- 状态文本：根据 useStatus 动态变色 -->
|
|
|
+ <span :class="['status_text', quesitonnaire.useStatus === 0 ? 'used' : 'unused']">
|
|
|
+ {{ quesitonnaire.useStatus === 0 ? '已使用' : '未使用' }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="time_row">
|
|
|
+ <span>{{ quesitonnaire.createTime }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="page_solid_line"></div>
|
|
|
+
|
|
|
+ <!-- 底部区域：操作按钮 -->
|
|
|
+ <div class="card_footer">
|
|
|
+ <el-button :class="[Number(quesitonnaire.useStatus) === 0 ? 'is-disabled' : 'button_background']">编辑</el-button>
|
|
|
+ <el-button class="button_border">预览</el-button>
|
|
|
+ <el-button class="button_refresh">复制</el-button>
|
|
|
+ <el-button :class="[Number(quesitonnaire.useStatus) === 0 ? 'is-disabled' : 'delete_button_border']">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <!-- 列表展示数据 -->
|
|
|
+ <Table v-else
|
|
|
+ :currentPage="currentPage"
|
|
|
+ :pageSize="pageSize"
|
|
|
+ :totalNum="totalNum"
|
|
|
+ :tableData="questionnaireList"
|
|
|
+ :tableColumns="questionnaireTableColumns"
|
|
|
+ >
|
|
|
+ <template #num="{currentIndex}">
|
|
|
+ {{ currentIndex + pageSize * (currentPage - 1)}}
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #useStatus="{row}">
|
|
|
+ <TableRowStatus :status="row.useStatus" :statusMsg="useStatusConvert"></TableRowStatus>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #operation="{row}">
|
|
|
+ <div class="table_row_option">
|
|
|
+ <span :class="[Number(row.useStatus) === 0 ? 'editor_disable' : 'el_button_editor']">编辑</span>
|
|
|
+ <span class="el_button_editor">预览</span>
|
|
|
+ <span class="el_button_editor">复制</span>
|
|
|
+ <span :class="[Number(row.useStatus) === 0 ? 'editor_disable' : 'el_button_delete']">删除</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </Table>
|
|
|
+
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -9,11 +90,204 @@
|
|
|
<script lang="ts" setup>
|
|
|
import {onMounted, ref} from 'vue'
|
|
|
|
|
|
+import Table from '@/baseComponents/Table.vue';
|
|
|
+import TabSearch from '@/baseComponents/TabSearch.vue';
|
|
|
+import TableRowStatus from '@/baseComponents/TableRowStatus.vue';
|
|
|
+import { viewModeTabList } from './tabSearch'; //视图项配置
|
|
|
+import { questionnaireTableColumns } from './table';
|
|
|
+import {useStatusConvert} from './useStatus'
|
|
|
+interface QuestionnaireItm {
|
|
|
+ id:Number,
|
|
|
+ title:String,
|
|
|
+ totalScore:Number|String,
|
|
|
+ createBy:String,
|
|
|
+ createTime:String,
|
|
|
+ useStatus:Number, //0 已使用 1 未使用
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// 视图模式切换
|
|
|
+const defaultViewMode = ref('list')
|
|
|
+const HandleTabChage = (val)=>{
|
|
|
+ defaultViewMode.value = val
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//问卷列表
|
|
|
+const currentPage = ref(1)
|
|
|
+const totalNum = ref(0)
|
|
|
+const pageSize = ref(20)
|
|
|
+const questionnaireList = ref<QuestionnaireItm[]>([
|
|
|
+ {
|
|
|
+ id:1,
|
|
|
+ title: "作业量满意度问卷",
|
|
|
+ totalScore: 100,
|
|
|
+ createBy: "管理员",
|
|
|
+ createTime: "2024-10-08 16:00",
|
|
|
+ useStatus: 1 // 未使用
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:2,
|
|
|
+ title: "作业量满意度问卷作业量满意度问卷作业量满意度问卷作度问卷作业量满意度问卷作度问卷作业量满意度问卷作度问卷作业量满意度问卷作业量满意度问卷卷...",
|
|
|
+ totalScore: 100,
|
|
|
+ createBy: "管理员",
|
|
|
+ createTime: "2024-10-08 16:00",
|
|
|
+ useStatus: 0 // 已使用
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:3,
|
|
|
+ title: "作业量满意度问卷",
|
|
|
+ totalScore: 100,
|
|
|
+ createBy: "管理员",
|
|
|
+ createTime: "2024-10-08 16:00",
|
|
|
+ useStatus: 1 // 未使用
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:4,
|
|
|
+ title: "作业量满意度问卷",
|
|
|
+ totalScore: 100,
|
|
|
+ createBy: "管理员",
|
|
|
+ createTime: "2024-10-08 16:00",
|
|
|
+ useStatus: 1 // 未使用
|
|
|
+ },
|
|
|
+
|
|
|
+]);
|
|
|
|
|
|
|
|
|
-onMounted(async ()=>{
|
|
|
-})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+
|
|
|
+:deep(.box_tab){
|
|
|
+ .selected{
|
|
|
+ &.prefix{
|
|
|
+ background: #2E64FA;
|
|
|
+ color: #fff;
|
|
|
+ border:none
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/* 列表容器：横向排列，允许换行 */
|
|
|
+.questionnaire_list {
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 20px;
|
|
|
+ list-style: none;
|
|
|
+ padding: 0;
|
|
|
+
|
|
|
+
|
|
|
+ /* 单个卡片样式 */
|
|
|
+ .card_item {
|
|
|
+ width: 325px; /* 固定宽度以匹配图片比例 */
|
|
|
+ background: #F8FAFE;
|
|
|
+ border: 1px solid #EBEEF5;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 16px 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap:12px;
|
|
|
+
|
|
|
+ /* 头部：图标和标题 */
|
|
|
+ .card_header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:8px;
|
|
|
+ padding:0 16px;
|
|
|
+
|
|
|
+ .card-icon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background-color: #e6f7ff; /* 浅蓝背景 */
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 4px;
|
|
|
+ }
|
|
|
+ .card_title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ line-height: 1;
|
|
|
+ // max-width: 240px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ /* 中部：元数据信息 */
|
|
|
+ .card_meta {
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ color: #666;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap:12px;
|
|
|
+ padding:0 16px;
|
|
|
+
|
|
|
+ .meta_row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+
|
|
|
+ .score_text {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 状态颜色控制 */
|
|
|
+ .status_text {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ display: inline-block;
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ /* 已使用 (蓝色) */
|
|
|
+ &.used {
|
|
|
+ color: #1890ff;
|
|
|
+ &::before {
|
|
|
+ background-color: #1890ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /* 未使用 (灰色) */
|
|
|
+ &.unused {
|
|
|
+ color: #999;
|
|
|
+ &::before {
|
|
|
+ background-color: #ccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .time_row {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 底部：按钮组 */
|
|
|
+ .card_footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ gap: 12px;
|
|
|
+ padding:0 16px;
|
|
|
+ // margin-top: auto; /* 将按钮推到底部 */
|
|
|
+ .el-button{
|
|
|
+ height: 32px;
|
|
|
+ padding: 6px 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-left: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</style>
|
lm
