mozhe
/
mental-health-web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

界面优化

This commit is contained in:
jiangzhe 2024-04-15 17:34:06 +08:00
parent 72e43e65e8
commit 62f37c42da
4 changed files with 65 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/views/login.vue
View File

@ -3,7 +3,7 @@
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
<div class="header">
<img class="logo" src="@/assets/logo/logo.png" />
<h1 class="title">云舒_心理健康平台</h1>
<h1 class="title">云舒心理健康平台</h1>
</div>
<el-form-item prop="username">
@ -180,10 +180,11 @@ onMounted(() => {
}
.title {
margin: 0px auto 30px auto;
margin: 20px auto 40px 5px;
text-align: center;
color: #64A5FF;
font-size: 25px;
letter-spacing: 10px;
}
.login-form {

4
src/views/scale/SysScale/index.vue
View File

@ -68,8 +68,8 @@
<el-table-column label="副标题" align="center" prop="scaleSubTitle" />
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<el-tag :type="scope.row.status === '0' ? 'success' : 'danger'" disable-transitions>
{{ scope.row.status === '1' ? '正常' : '停用' }}
<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" disable-transitions>
{{ scope.row.status === 1 ? '正常' : '停用' }}
</el-tag>
</template>
</el-table-column>

91
src/views/scale/SysScaleList/index.vue
View File

@ -1,22 +1,22 @@
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
:leave-active-class="proxy?.animate.searchAnimate.leave">
:leave-active-class="proxy?.animate.searchAnimate.leave">
<div class="search" v-show="showSearch">
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
<el-form-item label="量表名称" prop="scaleName">
<el-input v-model="queryParams.scaleName" placeholder="请输入量表名称" clearable style="width: 240px"
@keyup.enter="handleQuery" />
@keyup.enter="handleQuery"/>
</el-form-item>
<el-form-item label="量表编码" prop="scaleCode">
<el-input v-model="queryParams.scaleCode" placeholder="请输入量表编码" clearable style="width: 240px"
@keyup.enter="handleQuery" />
@keyup.enter="handleQuery"/>
</el-form-item>
<el-form-item label="量表类型" prop="scaleType">
<el-select v-model="queryParams.scaleType" placeholder="请选择量表类型" style="width: 240px"
@keyup.enter="handleQuery">
@keyup.enter="handleQuery">
<el-option v-for="item in scaleTypeList" :key="item.dictCode" :label="item.dictLabel"
:value="item.dictValue" />
:value="item.dictValue"/>
</el-select>
</el-form-item>
<el-form-item>
@ -38,14 +38,14 @@
</template>
<el-table v-loading="loading" :data="SysScaleList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="封面" align="center" prop="cover" width="150">
<template #default="scope">
<image-preview :src="scope.row.coverUrl" :width="150" :height="50" />
<image-preview :src="scope.row.coverUrl" :width="150" :height="50"/>
</template>
</el-table-column>
<el-table-column label="量表名称" align="center" prop="scaleName" />
<el-table-column label="量表编码" align="center" prop="scaleCode" />
<el-table-column label="量表名称" align="center" prop="scaleName"/>
<el-table-column label="量表编码" align="center" prop="scaleCode"/>
<el-table-column label="量表类型" align="center" prop="scaleTypeName">
<template #default="scope">
<el-space wrap>
@ -55,7 +55,21 @@
</el-space>
</template>
</el-table-column>
<el-table-column label="测评详情" align="center" prop="scaleDetails" />
<el-table-column label="测评详情" align="center" prop="scaleDetails">
<template #default="scope">
<el-popover
placement="top-start"
title="测评详情"
:width="400"
trigger="hover"
:content="scope.row.scaleDetails"
>
<template #reference>
<span class="text-ellipsis">{{ scope.row.scaleDetails }}</span>
</template>
</el-popover>
</template>
</el-table-column>
<el-table-column label="维度类型" align="center" prop="dimensionType">
<template #default="scope">
<el-tag v-if="scope.row.dimensionType === 0" type="primary">单项单维</el-tag>
@ -63,7 +77,7 @@
<el-tag v-else-if="scope.row.dimensionType === 2" type="primary">多项多维型</el-tag>
</template>
</el-table-column>
<el-table-column label="布布次数" align="center" prop="publishNums" />
<el-table-column label="布布次数" align="center" prop="publishNums"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="修改" placement="top">
@ -74,18 +88,18 @@
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" @pagination="getList" />
v-model:limit="queryParams.pageSize" @pagination="getList"/>
</el-card>
<!-- 添加或修改心理测评量对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="SysScaleFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="场次名称" prop="sessionName">
<el-input v-model="form.sessionName" placeholder="请输入量表名称" />
<el-input v-model="form.sessionName" placeholder="请输入量表名称"/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio value="0">正常</el-radio>
<el-radio value="1">停用</el-radio>
<el-radio value="1">正常</el-radio>
<el-radio value="0">停用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="查看结果" prop="allowQueryResult">
@ -96,16 +110,17 @@
</el-form-item>
<el-form-item label="截止日期" prop="expireTime">
<el-date-picker v-model="form.expireTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
placeholder="请选择截止日期" style="width: 100%" />
placeholder="请选择截止日期" style="width: 100%"/>
</el-form-item>
<el-form-item label="归属部门" prop="deptId">
<el-tree-select v-model="form.deptId" :data="deptOptions"
:props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门"
check-strictly />
:props="{ value: 'id', label: 'label', children: 'children' }" value-key="id"
placeholder="请选择归属部门"
check-strictly/>
</el-form-item>
<el-form-item label="量表" prop="scaleIds">
<el-select multiple v-model="form.scaleIds" placeholder="请选择量表" style="width: 100%">
<el-option v-for="item in scaleOptions" :key="item.scaleId" :label="item.scaleName" :value="item.scaleId" />
<el-option v-for="item in scaleOptions" :key="item.scaleId" :label="item.scaleName" :value="item.scaleId"/>
</el-select>
</el-form-item>
</el-form>
@ -118,26 +133,27 @@
</el-dialog>
<el-dialog title="查看量表试卷详情" v-model="detailVisible" width="800px" append-to-body>
<p style="font-size: 18px; font-weight: bold;" v-for="item in questionList" :key="item.questionId">{{ item.questionOrder + "、" + item.questionContent }}</p>
<p style="font-size: 18px; font-weight: bold;" v-for="item in questionList" :key="item.questionId">
{{ item.questionOrder + "、" + item.questionContent }}</p>
</el-dialog>
</div>
</template>
<script setup name="SysScale" lang="ts">
import { listSysScale, findAll } from '@/api/scale/SysScale';
import { SysScaleVO } from '@/api/scale/SysScale/types';
import {listSysScale, findAll} from '@/api/scale/SysScale';
import {SysScaleVO} from '@/api/scale/SysScale/types';
import { addScalePublish } from '@/api/scale/scalePublish';
import {addScalePublish} from '@/api/scale/scalePublish';
import { findByScaleId } from '@/api/scale/SysScaleQuestion'
import {findByScaleId} from '@/api/scale/SysScaleQuestion'
import { getDicts } from '@/api/system/dict/data';
import { DictDataVO } from '@/api/system/dict/data/types';
import {getDicts} from '@/api/system/dict/data';
import {DictDataVO} from '@/api/system/dict/data/types';
import { deptTreeSelect } from "@/api/system/user"
import {deptTreeSelect} from "@/api/system/user"
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const SysScaleList = ref<SysScaleVO[]>([]);
const buttonLoading = ref(false);
@ -161,12 +177,10 @@ const detailVisible = ref(false)
const data = reactive({
form: {},
queryParams: {},
rules: {
}
rules: {}
});
const { queryParams, form, rules } = toRefs(data);
const {queryParams, form, rules} = toRefs(data);
/** 查询心理测评量列表 */
const getList = async () => {
@ -229,6 +243,7 @@ const submitForm = () => {
}
const scaleTypeList = ref<DictDataVO[]>([])
async function getScaleTypeList() {
const res = await getDicts('scale_type')
scaleTypeList.value = res.data
@ -255,9 +270,10 @@ watch(() => dialog.visible, (visible) => {
})
const questionList = ref([])
async function handleDetail(row) {
console.log('handleDetail', row.scaleId);
const res = await findByScaleId({ scaleId: row.scaleId })
const res = await findByScaleId({scaleId: row.scaleId})
questionList.value = res.data
detailVisible.value = true
}
@ -267,3 +283,12 @@ onMounted(() => {
getScaleTypeList()
});
</script>
<style lang="scss" scoped>
.text-ellipsis {
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
white-space: nowrap
}
</style>

4
src/views/scale/SysScalePublish/index.vue
View File

@ -60,14 +60,14 @@
</el-table-column>
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<el-tag :type="scope.row.status === 0 ? 'success' : 'danger'" disable-transitions>
<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" disable-transitions>
{{ scope.row.status === 1 ? '正常' : '停用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="查看结果" align="center" prop="allowQueryResult">
<template #default="scope">
<el-tag :type="scope.row.status === 0 ? 'success' : 'danger'" disable-transitions>
<el-tag :type="scope.row.status === 0 ? 'danger' : 'success'" disable-transitions>
{{ scope.row.status === 0 ? '不允许' : '允许' }}
</el-tag>
</template>