界面优化

src/views/login.vue

@@ -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 {

src/views/scale/SysScale/index.vue

@@ -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>
+            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" disable-transitions>
-              {{ scope.row.status === '1' ? '正常' : '停用' }}
+              {{ scope.row.status === 1 ? '正常' : '停用' }}
             </el-tag>
           </template>
         </el-table-column>

src/views/scale/SysScaleList/index.vue

@@ -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="scaleName"/>
-        <el-table-column label="量表编码" align="center" prop="scaleCode" />
+        <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="请选择归属部门"
+                          :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id"
-            check-strictly />
+                          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 {listSysScale, findAll} from '@/api/scale/SysScale';
-import { SysScaleVO } from '@/api/scale/SysScale/types';
+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 {getDicts} from '@/api/system/dict/data';
-import { DictDataVO } from '@/api/system/dict/data/types';
+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>

src/views/scale/SysScalePublish/index.vue

@@ -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>