增加折叠面板效果

src/views/statistics/performance.vue

@@ -12,13 +12,47 @@
           <el-button style="margin-left: 25px;" type="success" @click="addScoreWin">创建评分</el-button>
         </div>
         <div style="margin-top: 15px">
-          <el-tree :default-expand-all="true" :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+          <el-tree ref="date" :default-expand-all="true" :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
         </div>
-
       </el-col>
       <el-col :span="18" >
-        <el-header style="background-color: green">111</el-header>
-        <el-main style="background-color: darkslategray;height: 650px">eeee</el-main>
+        <el-header >
+          <div style="margin-top: 5px;font-size: 16px;font-weight: 700; display: inline-block">{{title}}</div>
+          <el-form label-width="120px" style="display: inline-block">
+            <el-form-item label="被评分人:" >
+              <el-input  type="textarea" autosize v-model="editForm.scoreUsers" :readonly="true" style="width: 350px">
+              </el-input>
+              <el-button @click="openUsers1()" style="margin-left: 5px;" icon="el-icon-search" type="primary"></el-button>
+            </el-form-item>
+          </el-form>
+          <div style="display: inline-block;margin-left: 25px">
+            <el-button type="success" @click="exportOutPerformanceScore">导出绩效评分</el-button>
+          </div>
+        </el-header>
+        <el-main>
+          <el-collapse v-model="activeNames" >
+            <el-collapse-item  name="1">
+              <template slot="title">
+                张三本周总计38工时,任务数量9,已完成8     <el-button  @click="exportOutPerformanceScore">99</el-button>
+              </template>
+              <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+              <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
+            </el-collapse-item>
+            <el-collapse-item title="反馈 Feedback" name="2">
+              <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+              <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+            </el-collapse-item>
+            <el-collapse-item title="效率 Efficiency" name="3">
+              <div>简化流程：设计简洁直观的操作流程；</div>
+              <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
+              <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
+            </el-collapse-item>
+            <el-collapse-item title="可控 Controllability" name="4">
+              <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+              <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+            </el-collapse-item>
+          </el-collapse>
+        </el-main>
       </el-col>
     </el-row>
 
@@ -95,6 +129,8 @@ export default {
     return {
       yearValue:'2024',
       editFormVisible:false,
+      activeNames: ['1'],
+      title:'',
       editForm:{
         id:null,
         name:'',
@@ -107,6 +143,11 @@ export default {
         year:null,
         month:null
       },
+      searchForm:{
+        beginDate:null,
+        endDate:null,
+        dateId:null,
+      },
       users1Visble:false,
       filterText: '',
       userList:[],
@@ -135,8 +176,14 @@ export default {
         this.data=res.data
       });
     },
-    handleNodeClick(data) {
-      console.log(data);
+    handleNodeClick(data, n, component) {
+      let node = this.$refs.date.getCurrentNode();
+      if(node.json===null || node.json===''){
+
+      }else{
+       this.title=node.label
+      }
+
     },
     queryPerformanceDate(){
       let year=this.yearValue
@@ -249,6 +296,9 @@ export default {
         return true
       };
       return data.name.indexOf(value) !== -1;
+    },
+    exportOutPerformanceScore(){
+      alert('点击导出绩效评分')
     }
   }
 }