zhangyuheng/QuickExam-UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

finish some style

Browse Source
This commit is contained in:
zhangyuheng 2023-12-29 17:34:46 +08:00
parent 81bb0061fd
commit 5894a9cf5c
5 changed files with 117 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierrc.json
View File

@ -5,4 +5,4 @@
"singleQuote": true,
"printWidth": 100,
"trailingComma": "es5"
}
}

3
src/App.vue
View File

@ -18,8 +18,9 @@ header {
max-height: 100vh;
}
.container-main {
padding: 20px;
padding-top: 20px;
margin-left: 200px;
margin-top: 20px;
width: calc(100% - 200px);

2
src/assets/main.css
View File

@ -5,6 +5,7 @@
margin: 0 0;
padding: 2rem;
font-weight: normal;
width: 100%;
}
a,
@ -30,5 +31,6 @@ a,
#app {
display: grid;
padding: 0 2rem;
width: 100%;
}
}

170
src/components/Question/QueryConditions.vue
View File

@ -3,7 +3,7 @@ import type { QuestionQueryCondition } from '../../interfaces/question';
import { ORDER_TYPE } from '../../interfaces/page';
import type { Tag } from '../../interfaces/tag';
import { ref } from 'vue';
import { CircleCloseFilled, Search } from '@element-plus/icons-vue';
import { CircleCloseFilled, Search, Plus } from '@element-plus/icons-vue';
// tag list for filter (need to be fetched from backend)
const tagList = ref<Tag[]>([]);
@ -64,78 +64,100 @@ const outGoingData = () => {
<template>
<main>
<el-form :inline="true" :model="queryCondition" class="demo-form-inline">
<el-form-item label="发布状态">
<el-select v-model="filterPublishStatu" placeholder="请选择" @change="handlePublishChange">
<el-option label="全部" value="-1" />
<el-option label="已发布" value="1" />
<el-option label="编辑中" value="0" />
</el-select>
</el-form-item>
<el-form-item label="题型">
<el-select v-model="filterTypes" multiple placeholder="请选择" @change="handleTypeChange">
<el-option label="单选题" value="0" />
<el-option label="多选题" value="1" />
<el-option label="判断题" value="2" />
<el-option label="填空题" value="3" />
<el-option label="简答题" value="4" />
<el-option label="文件上传" value="5" />
</el-select>
</el-form-item>
<el-form-item label="标签">
<el-select v-model="filterTagIds" multiple placeholder="请选择" @change="handleTagChange">
<el-option v-for="tag in tagList" :key="tag.id" :label="tag.name" :value="tag.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="关键字">
<el-input v-model="queryCondition.search" placeholder="请输入关键字" />
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="filterTimerangeCreate"
type="daterange"
range-separator="至"
value-format="x"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="createTimeRangeChange"
/>
<el-button
:icon="CircleCloseFilled"
@click="
filterTimerangeCreate = [];
queryCondition.after_create_time = 0;
queryCondition.before_create_time = 0;
"
type="info"
text
/>
</el-form-item>
<el-form-item label="更新时间">
<el-date-picker
v-model="filterTimerangeUpdate"
type="daterange"
range-separator="至"
value-format="x"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="updateTimeRangeChange"
/>
<el-button
:icon="CircleCloseFilled"
@click="
filterTimerangeUpdate = [];
queryCondition.after_update_time = 0;
queryCondition.before_update_time = 0;
"
type="info"
text
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="outGoingData">搜索</el-button>
</el-form-item>
</el-form>
<div class="main-container">
<el-form :model="queryCondition" label-width="100px">
<el-row :gutter="18">
<el-col :span="20">
<el-form-item label="关键字">
<el-input v-model="queryCondition.search" placeholder="请输入关键字" />
</el-form-item>
</el-col>
<el-col :span="2">
<el-button type="primary" :icon="Search" @click="outGoingData" class="btn">搜索</el-button>
</el-col>
<el-col :span="2">
<el-button type="success" :icon="Plus" @click="outGoingData" class="btn">创建</el-button>
</el-col>
</el-row>
<el-row :gutter="18">
<el-col :span="8">
<el-form-item label="发布状态">
<el-select v-model="filterPublishStatu" placeholder="请选择" @change="handlePublishChange">
<el-option label="全部" value="-1" />
<el-option label="已发布" value="1" />
<el-option label="编辑中" value="0" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="题型">
<el-select v-model="filterTypes" multiple placeholder="请选择" @change="handleTypeChange">
<el-option label="单选题" value="0" />
<el-option label="多选题" value="1" />
<el-option label="判断题" value="2" />
<el-option label="填空题" value="3" />
<el-option label="简答题" value="4" />
<el-option label="文件上传" value="5" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="标签">
<el-select v-model="filterTagIds" multiple placeholder="请选择" @change="handleTagChange">
<el-option v-for="tag in tagList" :key="tag.id" :label="tag.name" :value="tag.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="18">
<el-col :span="12">
<el-form-item label="创建时间">
<div>
<el-date-picker v-model="filterTimerangeCreate" type="daterange" range-separator="至" value-format="x"
start-placeholder="开始日期" end-placeholder="结束日期" @change="createTimeRangeChange" />
<el-button :icon="CircleCloseFilled" @click="
filterTimerangeCreate = [];
queryCondition.after_create_time = 0;
queryCondition.before_create_time = 0;
" type="info" text />
</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="更新时间">
<div>
<el-date-picker v-model="filterTimerangeUpdate" type="daterange" range-separator="至" value-format="x"
start-placeholder="开始日期" end-placeholder="结束日期" @change="updateTimeRangeChange" />
<el-button :icon="CircleCloseFilled" @click="
filterTimerangeUpdate = [];
queryCondition.after_update_time = 0;
queryCondition.before_update_time = 0;
" type="info" text />
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</main>
</template>
<style>
.el-button.btn {
width: 100%;
}
.el-select {
width: 100%;
}
.el-date-picker {
width: 100%;
}
</style>

78
src/components/Question/TableQuestions.vue
View File

@ -1,21 +1,10 @@
<template>
<main>
<!-- Condition Filter From -->
<QueryConditions
@search="doFilterSearch"
:page="queryCondition.page"
:page_size="queryCondition.page_size"
/>
<QueryConditions @search="doFilterSearch" :page="queryCondition.page" :page_size="queryCondition.page_size" />
<!-- Table -->
<el-table
:data="page_data.items"
:table-layout="'auto'"
:default-sort="{ prop: 'id', order: 'ascending' }"
:border="true"
:disabled="disabled"
@sort-change="handleSortChange"
class="table-questions"
>
<el-table :data="page_data.items" :table-layout="'auto'" :default-sort="{ prop: 'id', order: 'ascending' }"
:border="true" :disabled="disabled" @sort-change="handleSortChange" class="table-questions">
<el-table-column prop="id" label="ID" :sortable="'custom'" class="table-column" width="70">
<template #default="scope">
<div class="table-item">
@ -24,13 +13,7 @@
</template>
</el-table-column>
<el-table-column prop="title" label="标题" :sortable="'custom'" class="table-column" />
<el-table-column
prop="type"
label="题型"
:sortable="'custom'"
class="table-column"
width="80"
>
<el-table-column prop="type" label="题型" :sortable="'custom'" class="table-column" width="80">
<template #default="scope">
<div class="table-item">
{{ getQuestionTypeText(scope.row.type) }}
@ -42,33 +25,21 @@
<div class="table-item">
{{
scope.row.reference_count === 0
? 0
: scope.row.correct_count / scope.row.reference_count * 100
? 0
: scope.row.correct_count / scope.row.reference_count * 100
}}
%
</div>
</template>
</el-table-column>
<el-table-column
prop="reference_count"
label="引用"
:sortable="'custom'"
class="table-column"
width="80"
>
<el-table-column prop="reference_count" label="引用" :sortable="'custom'" class="table-column" width="80">
<template #default="scope">
<div class="table-item">
{{ scope.row.reference_count }}
</div>
</template>
</el-table-column>
<el-table-column
prop="is_published"
label="状态"
:sortable="'custom'"
class="table-column"
width="80"
>
<el-table-column prop="is_published" label="状态" :sortable="'custom'" class="table-column" width="80">
<template #default="scope">
<div class="table-item">
<el-tag v-if="scope.row.is_published" type="success">已发布</el-tag>
@ -114,19 +85,10 @@
<template #default="scope">
<div class="table-item">
<el-row :gutter="20">
<el-col :span="10"
><el-button size="small" @click="handleEdit(scope.$index, scope.row)"
>编辑</el-button
></el-col
>
<el-col :span="10"
><el-button
size="small"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>删除</el-button
></el-col
>
<el-col :span="10"><el-button size="small"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button></el-col>
<el-col :span="10"><el-button size="small" type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button></el-col>
</el-row>
</div>
</template>
@ -134,18 +96,10 @@
</el-table>
<!-- Pagination -->
<el-pagination
v-model:current-page="page_data.page"
v-model:page-size="page_data.page_size"
:page-sizes="[10, 50, 100]"
:disabled="disabled"
:background="true"
layout="prev, pager, next, total, jumper, sizes"
:total="page_data.total_count"
@current-change="handlePageChange"
@size-change="handlePageSizeChange"
class="pagination"
/>
<el-pagination v-model:current-page="page_data.page" v-model:page-size="page_data.page_size"
:page-sizes="[10, 50, 100]" :disabled="disabled" :background="true" layout="prev, pager, next, total, jumper, sizes"
:total="page_data.total_count" @current-change="handlePageChange" @size-change="handlePageSizeChange"
class="pagination" />
</main>
</template>