fix:员工学习数据页面字段调整

src/views/report/Employeelearning.vue

@@ -1,6 +1,6 @@
 <template>
-<div class="employeelearning">
-  <div class="searchForm">
+  <div class="employeelearning">
+    <div class="searchForm">
       <a-form layout="inline">
         <a-form-item label="归属组织" :colon="false" class="reportSelect">
           <a-cascader
@@ -8,9 +8,9 @@
             :options="option"
             @change="orgChange"
             v-model:value="orgId"
-            style="width:145px;height:36px;border-radius:4px"
+            style="width: 145px; height: 36px; border-radius: 4px"
             placeholder="请选择归属组织"
-            :allowClear = false
+            :allowClear="false"
             :fieldNames="{
               label: 'orgName',
               value: 'organizationId',
@@ -20,20 +20,35 @@
           </a-cascader>
         </a-form-item>
         <a-form-item label="姓名" :colon="false">
-          <a-input v-model:value="name" placeholder="请输入姓名" allowClear style="width: 120px; height: 36px; border-radius: 4px"/>
+          <a-input
+            v-model:value="name"
+            placeholder="请输入姓名"
+            allowClear
+            style="width: 120px; height: 36px; border-radius: 4px"
+          />
         </a-form-item>
         <a-form-item label="工号" :colon="false">
-          <a-input v-model:value="userNo" placeholder="请输入工号" allowClear style="width: 126px; height: 36px; border-radius: 4px"/>
-        </a-form-item>
-        <a-form-item label="岗位" :colon="false">
-          <a-input v-model:value="studentJobName" placeholder="请输入岗位" allowClear style="width: 126px; height: 36px; border-radius: 4px"/>
+          <a-input
+            v-model:value="userNo"
+            placeholder="请输入工号"
+            allowClear
+            style="width: 126px; height: 36px; border-radius: 4px"
+          />
         </a-form-item>
+        <!-- <a-form-item label="岗位" :colon="false">
+          <a-input
+            v-model:value="studentJobName"
+            placeholder="请输入岗位"
+            allowClear
+            style="width: 126px; height: 36px; border-radius: 4px"
+          />
+        </a-form-item> -->
         <a-form-item label="Band" :colon="false" class="reportSelect">
           <a-select
             ref="select"
             allowClear
             v-model:value="valueBand"
-            style="width: 120px;height:36px; border-radius: 4px"
+            style="width: 120px; height: 36px; border-radius: 4px"
             :options="optionsBand"
             placeholder="请选择Band"
             @focus="focusBand"
@@ -42,102 +57,196 @@
         </a-form-item>
         <a-form-item>
           <a-space>
-            <a-button style="width: 60px;height: 32px;background: #4395FF;border-radius: 4px 4px 4px 4px;color: #FFFFFF;" @click="getTableData">搜索</a-button>
-            <a-button style="width: 60px;height: 32px;background: #4395FF;border-radius: 4px 4px 4px 4px;color: #FFFFFF;" @click="reset">重置</a-button>
+            <a-button
+              style="
+                width: 60px;
+                height: 32px;
+                background: #4395ff;
+                border-radius: 4px 4px 4px 4px;
+                color: #ffffff;
+              "
+              @click="getTableData"
+              >搜索</a-button
+            >
+            <a-button
+              style="
+                width: 60px;
+                height: 32px;
+                background: #4395ff;
+                border-radius: 4px 4px 4px 4px;
+                color: #ffffff;
+              "
+              @click="reset"
+              >重置</a-button
+            >
           </a-space>
         </a-form-item>
       </a-form>
-  </div>
-  <div class="content">
+    </div>
+    <div class="content">
       <div class="topToolbar">
-         <div>
+        <div>
           <a-space>
-            <a-button style="width: 60px;height: 32px;background: #4395FF;border-radius: 4px 4px 4px 4px;color: #FFFFFF;" @click="exportbtnz">导出</a-button>
+            <a-button
+              style="
+                width: 60px;
+                height: 32px;
+                background: #4395ff;
+                border-radius: 4px 4px 4px 4px;
+                color: #ffffff;
+              "
+              @click="exportbtnz"
+              >导出</a-button
+            >
             <a-tooltip>
               <template #title>导出全部数据</template>
-              <a-button style="width: 88px;height: 32px;background: #FFFFFF;border-radius: 4px 4px 4px 4px;border: 1px solid #E6E6E6;color: #333333 ;" @click="exportAllbtnz">导出全部</a-button>
-            </a-tooltip>          
+              <a-button
+                style="
+                  width: 88px;
+                  height: 32px;
+                  background: #ffffff;
+                  border-radius: 4px 4px 4px 4px;
+                  border: 1px solid #e6e6e6;
+                  color: #333333;
+                "
+                @click="exportAllbtnz"
+                >导出全部</a-button
+              >
+            </a-tooltip>
           </a-space>
-         </div>
-         <div>
-          <TableColSet v-model:columns="columns"/>
-         </div>
+        </div>
+        <div>
+          <TableColSet v-model:columns="columns" />
+        </div>
       </div>
       <!-- 以下为table表格 -->
       <div class="tableBox">
-      <a-table
-        :columns="columns.filter(n => n.visible==true)"
-        :data-source="tableData"
-        :loading="tableLoading"
-        :scroll="{ x: 700 }"
-        :pagination="false"
-        @change="handleTableChange"
-        :row-selection="{
-          selectedRowKeys: selectedRowKeys,
-          onChange: onSelectChange,
-        }"
-        rowKey="id"
-      >
-       <template v-slot:header>
-          <draggable
+        <a-table
+          :columns="columns.filter((n) => n.visible == true)"
+          :data-source="tableData"
+          :loading="tableLoading"
+          :scroll="{ x: 700 }"
+          :pagination="false"
+          @change="handleTableChange"
+          :row-selection="{
+            selectedRowKeys: selectedRowKeys,
+            onChange: onSelectChange,
+          }"
+          rowKey="id"
+        >
+          <template v-slot:header>
+            <draggable
               v-model="columns"
               item-key="key"
               :list="columns"
               :group="{ name: 'columns', pull: 'clone', put: false }"
-          >
-            <template #item="{ element }">
-              <a-table-column :title="element.title" :dataIndex="element.dataIndex" :key="element.key"></a-table-column>
+            >
+              <template #item="{ element }">
+                <a-table-column
+                  :title="element.title"
+                  :dataIndex="element.dataIndex"
+                  :key="element.key"
+                ></a-table-column>
+              </template>
+            </draggable>
+          </template>
+          <template #bodyCell="{ record, column }">
+            <template v-if="column.key === 'projectCompletedNum'">
+              <div
+                style="color: #02a7f0; cursor: pointer"
+                @click="openModal(record.studentId, 1)"
+              >
+                {{
+                  !record.projectCompletedNum ? "0" : record.projectCompletedNum
+                }}
+              </div>
+            </template>
+            <template v-if="column.key === 'routerCompletedNum'">
+              <div
+                style="color: #02a7f0; cursor: pointer"
+                @click="openModal(record.studentId, 2)"
+              >
+                {{
+                  !record.routerCompletedNum ? "0" : record.routerCompletedNum
+                }}
+              </div>
+            </template>
+            <template v-if="column.key === 'offCourseCompletedNum'">
+              <div
+                style="color: #02a7f0; cursor: pointer"
+                @click="openModal(record.studentId, 3)"
+              >
+                {{
+                  !record.offCourseCompletedNum
+                    ? "0"
+                    : record.offCourseCompletedNum
+                }}
+              </div>
+            </template>
+            <template v-if="column.key === 'onlineCompletedNum'">
+              <div
+                style="color: #02a7f0; cursor: pointer"
+                @click="openModal(record.studentId, 4)"
+              >
+                {{
+                  !record.onlineCompletedNum ? "0" : record.onlineCompletedNum
+                }}
+              </div>
+            </template>
+            <template v-if="column.key === 'examCompletedNum'">
+              <div
+                style="color: #02a7f0; cursor: pointer"
+                @click="openModal(record.studentId, 5)"
+              >
+                {{ !record.examCompletedNum ? "0" : record.examCompletedNum }}
+              </div>
+            </template>
+            <template v-if="column.key === 'caseViewsNum'">
+              <div
+                style="color: #02a7f0; cursor: pointer"
+                @click="openModal(record.studentId, 6)"
+              >
+                {{ !record.caseViewsNum ? "0" : record.caseViewsNum }}
+              </div>
+            </template>
+            <template v-if="column.key === 'professionalCompeletedNum'">
+              <div
+                style="color: #02a7f0; cursor: pointer"
+                @click="openModal(record.studentId, 7)"
+              >
+                {{
+                  !record.professionalCompeletedNum
+                    ? "0"
+                    : record.professionalCompeletedNum
+                }}
+              </div>
             </template>
-          </draggable>
-        </template>
-        <template #bodyCell="{ record, column }">
-          <template v-if="column.key === 'projectCompletedNum'">
-            <div style="color: #02a7f0; cursor: pointer;" @click="openModal(record.studentId,1)">{{ !record.projectCompletedNum?'0':record.projectCompletedNum }}</div>
           </template>
-          <template v-if="column.key === 'routerCompletedNum'">
-            <div style="color: #02a7f0; cursor: pointer;" @click="openModal(record.studentId,2)">{{ !record.routerCompletedNum?'0':record.routerCompletedNum }}</div>
-          </template>
-          <template v-if="column.key === 'offCourseCompletedNum'">
-            <div style="color: #02a7f0; cursor: pointer;" @click="openModal(record.studentId,3)">{{ !record.offCourseCompletedNum?'0':record.offCourseCompletedNum }}</div>
-          </template>
-          <template v-if="column.key === 'onlineCompletedNum'">
-            <div style="color: #02a7f0; cursor: pointer;" @click="openModal(record.studentId,4)">{{ !record.onlineCompletedNum?'0':record.onlineCompletedNum }}</div>
-          </template>
-          <template v-if="column.key === 'examCompletedNum'">
-            <div style="color: #02a7f0; cursor: pointer;" @click="openModal(record.studentId,5)">{{ !record.examCompletedNum?'0':record.examCompletedNum }}</div>
-          </template>
-          <template v-if="column.key === 'caseViewsNum'">
-            <div style="color: #02a7f0; cursor: pointer;" @click="openModal(record.studentId,6)">{{ !record.caseViewsNum?'0':record.caseViewsNum }}</div>
-          </template>
-          <template v-if="column.key === 'professionalCompeletedNum'">
-            <div style="color: #02a7f0; cursor: pointer;" @click="openModal(record.studentId,7)">{{ !record.professionalCompeletedNum?'0':record.professionalCompeletedNum }}</div>
-          </template>
-        </template>
-      </a-table>
-      <div class="tableBox">
-        <div class="pa">
-          <a-pagination
-            v-if="tableDataTotal > 10"
-            :showSizeChanger="false"
-            showQuickJumper="true"
-            hideOnSinglePage="true"
-            :pageSize="pageSize"
-            v-model:current="pageNo"
-            :total="tableDataTotal"
-            class="pagination"
-            @change="changePagination"
-          />
+        </a-table>
+        <div class="tableBox">
+          <div class="pa">
+            <a-pagination
+              v-if="tableDataTotal > 10"
+              :showSizeChanger="false"
+              showQuickJumper="true"
+              hideOnSinglePage="true"
+              :pageSize="pageSize"
+              v-model:current="pageNo"
+              :total="tableDataTotal"
+              class="pagination"
+              @change="changePagination"
+            />
+          </div>
         </div>
       </div>
     </div>
+    <EmployeelearningModal
+      v-if="isModalVisible"
+      v-model:isModalVisible="isModalVisible"
+      v-model:modalType="modalType"
+      v-model:studentId="currentStudentId"
+    />
   </div>
-  <EmployeelearningModal 
-        v-if='isModalVisible' 
-        v-model:isModalVisible="isModalVisible"
-        v-model:modalType="modalType"
-        v-model:studentId="currentStudentId"
-  />
-</div>
 </template>
 <script lang="jsx">
 import { ref, toRefs, reactive, onMounted } from "vue";
@@ -371,6 +480,7 @@ export default {
         colSortNo: 3,
         visible: true,
       },
+      /*
       {
         title: "所属岗位",
         dataIndex: "studentJobName",
@@ -382,6 +492,7 @@ export default {
         colSortNo: 4,
         visible: true,
       },
+      */
       {
         title: "所在Band",
         dataIndex: "bandInfo",
@@ -482,6 +593,7 @@ export default {
         visible: true,
         customRender: (text) => {return !text.value?'0':text.value;}
       },
+      /*
       {
         title: "考试完成数",
         dataIndex: "examCompletedNum",
@@ -504,6 +616,7 @@ export default {
         visible: true,
         customRender: (text) => {return !text.value?'0':text.value;}
       },
+      */
       {
         title: "考试及格率",
         dataIndex: "examPassRate",
@@ -537,6 +650,7 @@ export default {
         visible: true,
         customRender: (text) => {return !text.value?'0':text.value;}
       },
+      /*
       {
         title: "专业力必修完成数",
         dataIndex: "professionalCompeletedNum",
@@ -559,6 +673,7 @@ export default {
         visible: true,
         customRender: (text) => {return !text.value && text.value != 0?'0%':text.value + "%";}
       },
+      */
       // {
       //   title: "操作",
       //   dataIndex: "operation",
@@ -609,7 +724,7 @@ export default {
         name: state.name,
         orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
         bandCode: state.valueBand,
-        jobName: state.studentJobName,
+        //jobName: state.studentJobName,
         tableSorted: state.tableSorts
       });
       if (res) {
@@ -649,7 +764,7 @@ export default {
         name: state.name,
         orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
         bandCode: state.valueBand,
-        jobName: state.studentJobName,
+       // jobName: state.studentJobName,
       }
       axios({
         method: "post",
@@ -713,25 +828,25 @@ export default {
   border-radius: 4px !important;
 }
 
-.employeelearning{
+.employeelearning {
   width: 100%;
   height: 100%;
-  background: #F3F5F9;
-  .searchForm{
+  background: #f3f5f9;
+  .searchForm {
     height: 84px;
-    box-shadow: 1px 0px 4px 0px #DEE9FF;
+    box-shadow: 1px 0px 4px 0px #dee9ff;
     border-radius: 8px 8px 8px 8px;
-    background: #FFFFFF;
+    background: #ffffff;
     padding: 24px;
     box-sizing: border-box;
   }
-  .content{
-    background: #FFFFFF;
-    box-shadow: 0px 0px 6px 4px rgba(25,102,255,0.06);
+  .content {
+    background: #ffffff;
+    box-shadow: 0px 0px 6px 4px rgba(25, 102, 255, 0.06);
     border-radius: 8px 8px 8px 8px;
     padding: 24px;
     margin-top: 12px;
-    .topToolbar{
+    .topToolbar {
       display: flex;
       justify-content: space-between;
     }
@@ -739,27 +854,27 @@ export default {
 }
 
 .tableBox {
-    margin: 13px 0px 0px;
-    .ant-table-thead > tr > th {
-      background-color: #E9F0FF ;
-    }
+  margin: 13px 0px 0px;
+  .ant-table-thead > tr > th {
+    background-color: #e9f0ff;
+  }
 }
 
-  .tableBox {
-    padding-bottom: 0px;
+.tableBox {
+  padding-bottom: 0px;
 
-    .pa {
-      // position: absolute;
-      // bottom: 20px;
-      // left: 0;
-      width: 100%;
-      // height: 20px;
-      // background-color: red;
-      display: flex;
-      justify-content: center;
-      // margin-bottom: 10px;
-      // position: absolute;
-      // bottom: -40px;
-    }
+  .pa {
+    // position: absolute;
+    // bottom: 20px;
+    // left: 0;
+    width: 100%;
+    // height: 20px;
+    // background-color: red;
+    display: flex;
+    justify-content: center;
+    // margin-bottom: 10px;
+    // position: absolute;
+    // bottom: -40px;
   }
+}
 </style>