年度考核

src/components/pages/testPerson/examine/index.vue

@@ -1,13 +1,381 @@
 <template>
-  <div>审核</div>
+  <div class="all">
+    <div class="top">
+      <div class="top_left">
+        <div class="teacher">专任教师</div>
+        <div class="headteacher">班主任考核</div>
+      </div>
+
+      <div class="top_right">
+        <span style="margin-left:20px ;">审核进度：3/5</span>
+        <span style="margin-left:10px ;">认定分数：35.5分</span>
+        <div class="btn">
+          <div class="submit">提交</div>
+          <div class="save" style="margin-right: 15px;">保存</div>
+        </div>
+      </div>
+
+    </div>
+    <div class="main">
+      <table>
+        <tr>
+          <th style="width: 122px;">一级指标</th>
+          <th style="width: 184px;">二级指标</th>
+          <th style="width: 122px;">评价方法</th>
+          <th style="width: 82px;">分值</th>
+          <th style="width: 82px;">自评</th>
+          <th style="width: 123px;">自评概述</th>
+          <th style="width: 203px;">数据来源</th>
+          <th style="width: 103px;">认定</th>
+          <th style="width: 103px;">认定概述</th>
+
+        </tr>
+        <tr>
+          <td rowspan="4" style="height: 318px;"></td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td class="dataFrom" @click="handleClick"></td>
+          <td></td>
+          <td></td>
+        </tr>
+        <tr>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td class="dataFrom" @click="handleClick"></td>
+          <td></td>
+          <td></td>
+
+        </tr>
+        <tr>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td class="dataFrom" @click="handleClick"></td>
+          <td></td>
+          <td></td>
+
+        </tr>
+        <tr>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td class="dataFrom" @click="handleClick"></td>
+          <td></td>
+          <td></td>
+
+        </tr>
+        <tr>
+          <td rowspan="3" style="height: 244px;"></td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td class="dataFrom" @click="handleClick"></td>
+          <td></td>
+          <td></td>
+
+        </tr>
+        <tr>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td class="dataFrom" @click="handleClick"></td>
+          <td></td>
+          <td></td>
+
+        </tr>
+        <tr>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td class="dataFrom" @click="handleClick">单元格 7-6</td>
+          <td></td>
+          <td></td>
+
+
+        </tr>
+
+
+      </table>
+    </div>
+    <!-- 弹窗 -->
+    <div v-if="showModal" class="modal">
+      <div class="modal_top">
+        <div>数据来源</div>
+        <div style="margin-right:25px" @click="closeModal">关闭</div>
+      </div>
+      <div class="modal_top">
+        <div style="display: flex;">
+          <div>表单名称</div>
+          <div style="margin-left:15px">创建者</div>
+        </div>
+
+        <div class="more">再填一份</div>
+      </div>
+
+      <table style="width: 1950px;height: 616px;">
+        <thead>
+          <tr>
+            <th style="background-color:rgb(241, 241, 241);color:rgb(156, 159, 165)">序号</th>
+            <th style="background-color:rgb(241, 241, 241);color:rgb(156, 159, 165)">提交人</th>
+            <th style="background-color:rgb(241, 241, 241);color:rgb(156, 159, 165)">提交时间</th>
+            <th style="background-color:rgb(241, 241, 241);color:rgb(156, 159, 165)">学年</th>
+            <th style="background-color:rgb(241, 241, 241);color:rgb(156, 159, 165)">获奖内容</th>
+            <th style="background-color:rgb(241, 241, 241);color:rgb(156, 159, 165)">获奖级别</th>
+            <th style="background-color:rgb(241, 241, 241);color:rgb(156, 159, 165)">获奖名次</th>
+            <th style="background-color:rgb(241, 241, 241);color:rgb(156, 159, 165)">证书或相关资料</th>
+            <th style="background-color:rgb(241, 241, 241);color:rgb(156, 159, 165)">操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td>
+              <el-button size="mini">编辑</el-button>
+              <el-button size="mini" type="danger">删除</el-button>
+            </td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td>
+              <el-button size="mini">编辑</el-button>
+              <el-button size="mini" type="danger">删除</el-button>
+            </td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td>
+              <el-button size="mini">编辑</el-button>
+              <el-button size="mini" type="danger">删除</el-button>
+            </td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td>
+              <el-button size="mini">编辑</el-button>
+              <el-button size="mini" type="danger">删除</el-button>
+            </td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td>
+              <el-button size="mini">编辑</el-button>
+              <el-button size="mini" type="danger">删除</el-button>
+            </td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td>
+              <el-button size="mini">编辑</el-button>
+              <el-button size="mini" type="danger">删除</el-button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+    </div>
+  </div>
+
+
 </template>
 
 <script>
 export default {
+  data() {
+    return {
+      showModal: false,
 
-}
+    };
+  },
+  methods: {
+    handleClick() {
+      this.showModal = true;
+    },
+    closeModal() {
+      this.showModal = false;
+    },
+
+  },
+};
 </script>
 
-<style>
+<style scoped>
+.top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+}
+
+.top_left {
+  display: flex;
+}
+
+.top_right {
+  display: flex;
+  align-items: center;
+}
+
+.teacher {
+  width: 96px;
+  height: 44px;
+  line-height: 44px;
+  padding: 8px;
+  background-color: #FFFFFF;
+  font-size: 20px;
+  font-weight: 500;
+  border-bottom: 3px solid rgba(54, 129, 252, 1);
+  text-align: center;
 
-</style>
+}
+
+.headteacher {
+  width: 116px;
+  height: 44px;
+  line-height: 44px;
+  font-size: 20px;
+  font-weight: 400;
+  background-color: #FFFFFF;
+  text-align: center;
+  padding: 8px;
+  color: #ccc;
+  margin-left: 20px;
+}
+
+span {
+  font-size: 20px;
+  margin-right: 15px;
+}
+
+.btn {
+  margin-right: 20px;
+  display: flex;
+  flex-direction: row-reverse;
+  cursor: pointer;
+}
+
+.submit,
+.save {
+  width: 48px;
+  height: 28px;
+  background: rgba(54, 129, 252, 1);
+  border-radius: 6px;
+  text-align: center;
+  line-height: 28px;
+  color: #fff;
+}
+
+.main {
+  margin-top: 34px;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  border: 1px solid gray;
+  text-align: center;
+  padding: 8px;
+  background-color: #fff;
+
+}
+
+.dataFrom {
+  color: rgba(0, 32, 228, 1);
+  cursor: pointer;
+
+}
+
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: white;
+
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2), 0px 4px 10px rgba(0, 0, 0, 0.1);
+
+  .modal_top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+    margin-top: 15px;
+    font-size: 22px;
+    cursor: pointer;
+  }
+}
+
+.more {
+  background-color: rgb(54, 129, 252);
+  color: #fff;
+  text-align: center;
+  width: 80px;
+  height: 40px;
+  line-height: 40px;
+  padding: 8px;
+  font-size: 17px
+}
+</style>

src/components/pages/testPerson/test/test.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="i_body_box">
         <div class="check_nav">
-            <div class="nav all" v-show="false" :class="{ active: type == '1' }" @click="checkType('1')">
+            <div class="nav all" v-show="true" :class="{ active: type == '1' }" @click="checkType('1')">
                 年度考核
             </div>
             <div class="nav all" :class="{ active: type == '' }" @click="checkType('')">