perf(monthlyAssess): 优化非干部月度考核页面展示与交互

1.  移除冗余的考核结果展示项，新增角色字段展示
2.  将多个指标依据、奖惩明细改为可点击查看详情的链接样式
3.  为多数表单字段添加禁用状态，调整表单布局结构
4.  新增详情弹窗组件，重构总分、奖惩汇总等展示逻辑
5.  补充缺失的表单字段默认值，优化代码格式与样式

src/views/performanceManage/monthlyAssess/index.vue

@@ -194,10 +194,7 @@
             <div class="score-display">
               <span class="score-label">总分：</span>
               <span class="score-value">{{ nonCadreForm.totalScore }}</span>
-              <span class="result-label">考核结果：</span>
-              <span class="result-value" :class="{ 'text-danger': nonCadreForm.assessmentResult === 'unqualified' }">
-                {{ getResultText(nonCadreForm.assessmentResult) }}
-              </span>
+
             </div>
           </el-col>
         </el-row>
@@ -205,12 +202,17 @@
         <el-row :gutter="20">
           <el-col :span="8">
             <el-form-item label="用工形式" prop="employmentType">
-              <el-select v-model="nonCadreForm.employmentType" placeholder="请选择用工形式" style="width: 100%">
+              <el-select v-model="nonCadreForm.employmentType" placeholder="请选择用工形式" style="width: 100%" disabled>
                 <el-option v-for="item in employment_type" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="8">
+            <el-form-item label="角色" prop="roleName">
+              <el-input v-model="nonCadreForm.roleName" disabled placeholder="角色" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="分管班组长" prop="deputyTeamLeaderName">
               <el-select v-model="nonCadreForm.deputyTeamLeaderName" placeholder="请选择分管班组长" style="width: 100%"
                 clearable>
@@ -219,6 +221,11 @@
               </el-select>
             </el-form-item>
           </el-col>
+
+
+        </el-row>
+
+        <el-row :gutter="20">
           <el-col :span="8">
             <el-form-item label="分管主管" prop="deputySupervisorName">
               <el-select v-model="nonCadreForm.deputySupervisorName" placeholder="请选择分管主管" style="width: 100%"
@@ -228,9 +235,6 @@
               </el-select>
             </el-form-item>
           </el-col>
-        </el-row>
-
-        <el-row :gutter="20">
           <el-col :span="8">
             <el-form-item label="分管经理" prop="deputyManagerName">
               <el-input v-model="nonCadreForm.deputyManagerName" placeholder="请输入分管经理" />
@@ -282,8 +286,9 @@
             </el-col>
             <el-col :span="12">
               <el-form-item label="红线指标依据">
-                <el-input v-model="nonCadreForm.redLineBasis" type="textarea" :rows="1" disabled
-                  placeholder="不可编辑，红线明细的集合" />
+                <span class="detail-link" @click="showDetailModal('红线指标依据', nonCadreForm.redLineBasis)">
+                  {{ nonCadreForm.redLineBasis || '查看详情' }}
+                </span>
               </el-form-item>
             </el-col>
           </el-row>
@@ -296,8 +301,9 @@
             </el-col>
             <el-col :span="12">
               <el-form-item label="核心指标依据">
-                <el-input v-model="nonCadreForm.coreIndicatorBasis" type="textarea" :rows="1" disabled
-                  placeholder="不可编辑，各个明细的集合" />
+                <span class="detail-link" @click="showDetailModal('核心指标依据', nonCadreForm.coreIndicatorBasis)">
+                  {{ nonCadreForm.coreIndicatorBasis || '查看详情' }}
+                </span>
               </el-form-item>
             </el-col>
           </el-row>
@@ -310,8 +316,9 @@
             </el-col>
             <el-col :span="12">
               <el-form-item label="其他指标中的安全指标（仅含SOC/站品控检查扣分）依据">
-                <el-input v-model="nonCadreForm.safetyWithSocBasis" type="textarea" :rows="1" disabled
-                  placeholder="不可编辑，各个明细的集合" />
+                <span class="detail-link" @click="showDetailModal('其他指标中的安全指标依据', nonCadreForm.safetyWithSocBasis)">
+                  {{ nonCadreForm.safetyWithSocBasis || '查看详情' }}
+                </span>
               </el-form-item>
             </el-col>
           </el-row>
@@ -324,8 +331,9 @@
             </el-col>
             <el-col :span="12">
               <el-form-item label="其他指标中的非安全指标依据">
-                <el-input v-model="nonCadreForm.nonSafetyIndicatorBasis" type="textarea" :rows="1" disabled
-                  placeholder="不可编辑，各个明细的集合" />
+                <span class="detail-link" @click="showDetailModal('其他指标中的非安全指标依据', nonCadreForm.nonSafetyIndicatorBasis)">
+                  {{ nonCadreForm.nonSafetyIndicatorBasis || '查看详情' }}
+                </span>
               </el-form-item>
             </el-col>
           </el-row>
@@ -338,8 +346,9 @@
             </el-col>
             <el-col :span="12">
               <el-form-item label="SOC/站品控检查的涉及核心、安全指标扣分依据">
-                <el-input v-model="nonCadreForm.socSafetyCoreDeductionBasis" type="textarea" :rows="1" disabled
-                  placeholder="不可编辑，各个明细的集合" />
+                <span class="detail-link" @click="showDetailModal('SOC/站品控检查的涉及核心、安全指标扣分依据', nonCadreForm.socSafetyCoreDeductionBasis)">
+                  {{ nonCadreForm.socSafetyCoreDeductionBasis || '查看详情' }}
+                </span>
               </el-form-item>
             </el-col>
           </el-row>
@@ -364,23 +373,25 @@
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="考核备注" prop="assessmentRemark">
-                <el-input v-model="nonCadreForm.assessmentRemark" type="textarea" :rows="1" placeholder="请输入考核备注" />
+              <el-form-item label="总分">
+                <el-input v-model="nonCadreForm.totalScore" disabled placeholder="不可编辑" />
               </el-form-item>
             </el-col>
           </el-row>
 
           <el-row :gutter="20">
             <el-col :span="12">
-              <el-form-item label="奖励明细汇总">
-                <el-input v-model="nonCadreForm.rewardDetailsSummary" type="textarea" :rows="1" disabled
-                  placeholder="不可编辑，各个明细的集合" />
+              <el-form-item label="奖励明细">
+                <span class="detail-link" @click="showDetailModal('奖励明细', nonCadreForm.rewardDetailsSummary)">
+                  {{ nonCadreForm.rewardDetailsSummary || '查看详情' }}
+                </span>
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="惩罚明细汇总">
-                <el-input v-model="nonCadreForm.penaltyDetailsSummary" type="textarea" :rows="1" disabled
-                  placeholder="不可编辑，各个明细的集合" />
+              <el-form-item label="惩罚明细">
+                <span class="detail-link" @click="showDetailModal('惩罚明细', nonCadreForm.penaltyDetailsSummary)">
+                  {{ nonCadreForm.penaltyDetailsSummary || '查看详情' }}
+                </span>
               </el-form-item>
             </el-col>
           </el-row>
@@ -389,7 +400,7 @@
             <el-col :span="12">
               <el-form-item label="奖励汇总" prop="rewardAmount">
                 <div class="input-with-unit">
-                  <el-input-number v-model="nonCadreForm.rewardAmount" :min="0" :precision="2"
+                  <el-input-number v-model="nonCadreForm.rewardAmount" :min="0" :precision="2" disabled
                     style="width: calc(100% - 40px)" />
                   <span class="unit">元</span>
                 </div>
@@ -398,24 +409,39 @@
             <el-col :span="12">
               <el-form-item label="扣罚汇总" prop="penaltyAmount">
                 <div class="input-with-unit">
-                  <el-input-number v-model="nonCadreForm.penaltyAmount" :min="0" :precision="2"
+                  <el-input-number v-model="nonCadreForm.penaltyAmount" :min="0" :precision="2" disabled
                     style="width: calc(100% - 40px)" />
                   <span class="unit">元</span>
                 </div>
               </el-form-item>
             </el-col>
-       
+
           </el-row>
 
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="是否豁免" prop="exemption">
-                <el-input v-model="nonCadreForm.exemption" placeholder="请输入是否豁免" />
+                <el-input v-model="nonCadreForm.exemption" placeholder="请输入是否豁免" disabled />
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="豁免备注" prop="exemptionReasonRemark">
-                <el-input v-model="nonCadreForm.exemptionReasonRemark" type="textarea" :rows="1" placeholder="请输入豁免备注" />
+                <el-input v-model="nonCadreForm.exemptionReasonRemark" type="textarea" :rows="1" placeholder="请输入豁免备注"
+                  disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="考核结果" prop="assessmentResult" disabled>
+                <el-input v-model="nonCadreForm.assessmentResult" placeholder="请输入考核结果" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="考核结果备注" prop="assessmentResultRemark">
+                <el-input v-model="nonCadreForm.assessmentResultRemark" type="textarea" :rows="1"
+                  placeholder="请输入考核结果备注" disabled />
               </el-form-item>
             </el-col>
           </el-row>
@@ -428,7 +454,7 @@
             </el-col>
             <el-col :span="12">
               <el-form-item label="应用备注" prop="applicationMethodRemark">
-                <el-input v-model="nonCadreForm.applicationMethodRemark" type="textarea" :rows="1"
+                <el-input v-model="nonCadreForm.applicationMethodRemark" type="textarea" :rows="1" disabled
                   placeholder="请输入应用备注" />
               </el-form-item>
             </el-col>
@@ -510,6 +536,18 @@
         </div>
       </template>
     </el-dialog>
+
+    <!-- 详情模态框 -->
+    <el-dialog :title="detailModal.title" v-model="detailModal.visible" width="60%">
+      <div class="detail-content">
+        {{ detailModal.content || '暂无内容' }}
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="detailModal.visible = false">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -565,6 +603,7 @@ const nonCadreForm = reactive({
   exemption: '',
   exemptionReasonRemark: '',
   rewardAmount: 0,
+  penaltyAmount: 0,
   punishmentAmount: 0,
   assessmentRemark: '',
   applicationMethodRemark: '',
@@ -575,8 +614,8 @@ const nonCadreForm = reactive({
 
 function addIndicatorToGroup(item) {
   const categoryName = item.categoryNameOne || '未分类'
-  
-  let group = nonCadreForm.indicatorGroups.length == 0 ? null:nonCadreForm.indicatorGroups.find(g => g.title === categoryName);
+
+  let group = nonCadreForm.indicatorGroups.length == 0 ? null : nonCadreForm.indicatorGroups.find(g => g.title === categoryName);
 
   if (!group) {
     group = {
@@ -655,6 +694,20 @@ const dialog = reactive({
   type: 'non-cadre'
 })
 
+// 详情模态框
+const detailModal = reactive({
+  visible: false,
+  title: '',
+  content: ''
+})
+
+// 显示详情模态框
+const showDetailModal = (title, content) => {
+  detailModal.title = title
+  detailModal.content = content
+  detailModal.visible = true
+}
+
 // 数据列表
 const nonCadreList = ref([])
 const cadreList = ref([])
@@ -786,7 +839,7 @@ const handleAdd = () => {
 
   // 重置表单数据
   if (currentTab.value === 'non-cadre') {
-    
+
     nonCadreForm.indicatorGroups = []
   }
 }
@@ -1064,6 +1117,7 @@ onMounted(() => {
   height: 32px;
   line-height: 32px;
   padding: 0 10px;
+  justify-content: center;
 }
 
 .score-label,
@@ -1174,4 +1228,29 @@ onMounted(() => {
   font-weight: 500;
   color: #303133;
 }
+
+.detail-link {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: underline;
+  display: inline-block;
+  width: 100%;
+  padding: 5px 0;
+}
+
+.detail-link:hover {
+  color: #66b1ff;
+}
+
+.detail-content {
+  padding: 20px;
+  line-height: 1.8;
+  font-size: 14px;
+  color: #303133;
+  min-height: 100px;
+  max-height: 500px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
 </style>