zc

src/views/safetyEducationExaminationNew/trainingManagement/addPage.vue

@@ -0,0 +1,66 @@
+<!-- 新建/编辑培训 -->
+<template>
+  <div class="page-container trainingManagement-addPage">
+    <div class="page-top-title-box">
+      <p class="page-top-title-name-p">{{newData.id?'编辑':'新增'}}</p>
+      <p class="page-top-title-out-p" @click="backPage">返回</p>
+      <p class="page-top-title-add-p" @click="submitForm">提交</p>
+    </div>
+    <div class="content-box">
+      <el-form :model="formData" ref="addForm" :rules="rules" label-width="240px">
+
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+  //import { getDicts } from "@/api/commonality/noPermission";
+  //import { systemUserSelect } from "@/api/commonality/permission";
+  export default {
+    name: 'addPage',
+    props: {
+      propsData: {}
+    },
+    data() {
+      return {
+        newData: {},
+        formData:{
+
+        },
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      this.initialize()
+    },
+    methods: {
+      // 初始化
+      initialize() {
+
+      },
+      // 返回按钮
+      backPage() {
+        this.$parent.tableButton(6)
+      },
+      // 提交按钮
+      submitForm() {
+
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .trainingManagement-addPage {
+    .content-box {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      padding: 20px;
+    }
+  }
+</style>

src/views/safetyEducationExaminationNew/trainingManagement/index.vue

@@ -25,9 +25,9 @@
             </el-select>
           </el-form-item>
           <el-form-item label="" prop="queryParamsData3">
-            <el-select v-model="queryParams.queryParamsData3" placeholder="分类" style="width: 200px">
+            <el-select v-model="queryParams.queryParamsData3" placeholder="培训方式" style="width: 200px">
               <el-option
-                v-for="dict in optionListB"
+                v-for="dict in optionListD"
                 :key="dict.value"
                 :label="dict.label"
                 :value="dict.value"
@@ -35,6 +35,16 @@
             </el-select>
           </el-form-item>
           <el-form-item label="" prop="queryParamsData4">
+            <el-select v-model="queryParams.queryParamsData4" placeholder="分类" style="width: 200px">
+              <el-option
+                v-for="dict in optionListB"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="" prop="deptId">
             <el-cascader
               style="width: 180px"
               v-model="queryParams.deptId"
@@ -93,12 +103,18 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column label="学时/积分" prop="content" width="200" show-overflow-tooltip>
+          <el-table-column label="组织单位" prop="name" width="140" show-overflow-tooltip/>
+          <el-table-column label="培训方式" prop="content" width="100" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span>{{scope.row.name==1?'线上培训':(scope.row.name==2?'线下培训':'')}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="学时/积分" prop="content" width="140" show-overflow-tooltip>
             <template slot-scope="scope">
               <span style="color:#10a37f;font-weight:600;">学时{{scope.row.name}} +{{scope.row.name}}分</span>
             </template>
           </el-table-column>
-          <el-table-column label="签到人数" prop="content" width="200" show-overflow-tooltip>
+          <el-table-column label="进度" prop="content" width="140" show-overflow-tooltip>
             <template slot-scope="scope">
               <div>
                 <p><span :class="scope.row.status==1?'color-a':(scope.row.status==2?'color-b':(scope.row.status==3?'color-c':''))">50</span>/<span>60</span></p>
@@ -189,6 +205,21 @@
         <p class="dialog-footer-button-null"></p>
       </div>
     </el-dialog>
+
+    <el-dialog class="trainingTask-list-dialog" :title="dialogListTitle"
+               :visible.sync="dialogListType" v-if="dialogListType" width="1090px"
+               append-to-body :close-on-click-modal="false">
+      <div class="trainingTask-list-dialog-box">
+        <trainingProgressDetails v-if="dialogListPageType==1" :propsData="dialogListPropsData"></trainingProgressDetails>
+        <trainingRecordDetails v-if="dialogListPageType==2" :propsData="dialogListPropsData"></trainingRecordDetails>
+      </div>
+      <div slot="footer" class="dialog-footer dialog-footer-box">
+        <p class="dialog-footer-button-null"></p>
+        <p class="dialog-footer-button-primary" v-if="dialogListPageType==2" @click="exportButton">导出记录</p>
+        <p class="dialog-footer-button-info" @click="cancelButton">关闭</p>
+        <p class="dialog-footer-button-null"></p>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -196,14 +227,17 @@
   //import { getDicts } from "@/api/commonality/noPermission";
   //import { systemUserSelect } from "@/api/commonality/permission";
   //import { getInfo } from "@/api/basicsModules/index";
-  //import addPage from "./addPage.vue";
+  import trainingProgressDetails from "./trainingProgressDetails.vue";
+  import trainingRecordDetails from "./trainingRecordDetails.vue";
   import {
     systemDeptCurrentDept,
   } from "@/api/safetyEducationExaminationNew/index";
   export default {
     name: 'index',
     components: {
-      vueQr
+      vueQr,
+      trainingProgressDetails,
+      trainingRecordDetails,
     },
     data() {
       return {
@@ -214,6 +248,7 @@
         optionListA: [{ value: '0', label: '未开始' }, { value: '1', label: '进行中' }, { value: '2', label: '已结束' }],
         optionListB: [],
         optionListC: [],
+        optionListD: [{ value: '1', label: '线上培训' }, { value: '2', label: '线下培训' }],
         //查询条件
         queryParams: {
           page: 1,
@@ -222,6 +257,7 @@
           queryParamsData2: null,
           queryParamsData3: null,
           queryParamsData4: null,
+          deptId:'',
         },
         //时间数据
         dateRange: [],
@@ -240,7 +276,12 @@
           title:'',
           playTime:'',
           endTime:'',
-        }
+        },
+        //弹窗展示
+        dialogListTitle:'',
+        dialogListType:false,
+        dialogListPageType:null,
+        dialogListPropsData:null,
       }
     },
     created() {
@@ -266,6 +307,7 @@
           queryParamsData2: null,
           queryParamsData3: null,
           queryParamsData4: null,
+          deptId:'',
         })
         this.getList()
       },
@@ -317,10 +359,10 @@
           })
         } else if (type == 4) {
           //查看记录
-          this.$set(this, 'pageType', 2)
-          let obj = JSON.parse(JSON.stringify(row))
-          obj.showType = false
-          this.$set(this, 'propsData', obj)
+          this.$set(this, 'dialogListTitle', '培训记录详情');
+          this.$set(this, 'dialogListPageType', 2);
+          this.$set(this, 'dialogListPropsData', row);
+          this.$set(this, 'dialogListType', true);
         } else if (type == 5) {
           //签到码
           this.$set(this,'codeData',{
@@ -334,10 +376,10 @@
           this.dialogQrCodeOn();
         } else if (type == 6) {
           //进度
-          this.$set(this, 'pageType', 2)
-          let obj = JSON.parse(JSON.stringify(row))
-          obj.showType = false
-          this.$set(this, 'propsData', obj)
+          this.$set(this, 'dialogListTitle', '培训进度详情');
+          this.$set(this, 'dialogListPageType', 1);
+          this.$set(this, 'dialogListPropsData', row);
+          this.$set(this, 'dialogListType', true);
         } else if (type == 7) {
           //编辑
           this.$set(this, 'pageType', 2)
@@ -366,6 +408,14 @@
           this.getList()
         }
       },
+      //关闭弹窗
+      cancelButton(){
+        this.$set(this,'dialogListType',false);
+      },
+      //导出记录
+      exportButton(){
+
+      },
       //学院列表
       systemDeptCurrentDept(){
         systemDeptCurrentDept({}).then(response => {

src/views/safetyEducationExaminationNew/trainingManagement/trainingProgressDetails.vue

@@ -0,0 +1,184 @@
+<!-- 培训进度详情 -->
+<template>
+  <div class="page-container trainingProgressDetails-addPage">
+    <p class="title-p">实验室生物安全操作规范培训</p>
+    <div class="num-max-box">
+      <div class="num-box">
+        <p>{{newData.newData1}}</p>
+        <p>计划人数</p>
+      </div>
+      <div class="num-box">
+        <p>{{newData.newData2}}</p>
+        <p>已签到</p>
+      </div>
+      <div class="num-box">
+        <p>{{newData.newData3}}</p>
+        <p>未签到</p>
+      </div>
+      <div class="num-box">
+        <p>{{newData.newData4}}%</p>
+        <p>签到率</p>
+      </div>
+    </div>
+    <el-progress stroke-width="10" :text-inside="true" style="margin:15px 0 15px;"
+      :percentage="percentage" :format="format"></el-progress>
+    <div class="page-content-box">
+      <el-table class="table-box" style="padding:0;" border :data="dataList">
+        <el-table-column label="姓名" prop="name" show-overflow-tooltip/>
+        <el-table-column label="学号" prop="content" width="160" show-overflow-tooltip/>
+        <el-table-column label="学院单位" prop="content" width="160" show-overflow-tooltip/>
+        <el-table-column label="签到状态" prop="content" width="160" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p :class="scope.row.status==1?'color-a':(scope.row.status==2?'color-b':'')">{{scope.row.status==1?'已签到':(scope.row.status==2?'未签到':'')}}</p>
+          </template>
+        </el-table-column>
+        <el-table-column label="签到时间" prop="content" width="160" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{parseTime(scope.row.startTime,"{h}:{i}")}}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination :page-sizes="[20, 30, 40, 50]"
+                  v-show="total>0"
+                  :total="total"
+                  :page.sync="queryParams.page"
+                  :limit.sync="queryParams.pageSize"
+                  @pagination="getList"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  //import { getDicts } from "@/api/commonality/noPermission";
+  //import { systemUserSelect } from "@/api/commonality/permission";
+  export default {
+    name: 'addPage',
+    props: {
+      propsData: {}
+    },
+    data() {
+      return {
+        newData: {
+          newData1:'60',
+          newData2:'42',
+          newData3:'18',
+          newData4:'70',
+        },
+        //查询条件
+        queryParams: {
+          page: 1,
+          pageSize: 20,
+        },
+        percentage:70,
+        dataList:[{status:1},{status:2},],
+        //数据数量
+        total: 0,
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      this.initialize()
+    },
+    methods: {
+      format(percentage) {
+        return percentage === 100 ? '' : '';
+      },
+      // 初始化
+      initialize() {
+
+      },
+      getList(){
+
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .trainingProgressDetails-addPage {
+    height:500px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .title-p{
+      font-size: 15px;
+      line-height:20px;
+      font-weight: 600;
+      margin-bottom: 15px;
+      color:#333;
+    }
+    .num-max-box{
+      display: flex;
+      .num-box:nth-child(1){
+        background-color: #f5f8ff;
+        margin-right:15px;
+        p:nth-child(1){
+          color:#1857D4;
+        }
+      }
+      .num-box:nth-child(2){
+        background-color: #EDFAF6;
+        margin-right:15px;
+        p:nth-child(1){
+          color:#10A37F;
+        }
+      }
+      .num-box:nth-child(3){
+        background-color: #FFF5F5;
+        margin-right:15px;
+        p:nth-child(1){
+          color:#E53E3E;
+        }
+      }
+      .num-box:nth-child(4){
+        background-color: #FEF6EC;
+        p:nth-child(1){
+          color:#E67E22;
+        }
+      }
+      .num-box{
+        padding:12px;
+        flex:1;
+        border-radius:8px;
+        p{
+          text-align: center;
+        }
+        p:nth-child(1){
+          font-size: 24px;
+          font-weight: 700;
+        }
+        p:nth-child(2){
+          font-size:12px;
+          color: #8896a7;
+        }
+      }
+    }
+    .page-content-box{
+      flex:1;
+      padding:0;
+      .color-a{
+        display:inline-block ;
+        padding:0 10px;
+        border-radius:10px;
+        height: 23px;
+        line-height:23px;
+        font-size:14px;
+        background-color: #edfaf6;
+        color:#0d8f6f;
+      }
+      .color-b{
+        display:inline-block ;
+        padding:0 10px;
+        border-radius:10px;
+        height: 23px;
+        line-height:23px;
+        font-size:14px;
+        background-color: #fff5f5;
+        color:#e53e3e;
+      }
+    }
+  }
+</style>

src/views/safetyEducationExaminationNew/trainingManagement/trainingRecordDetails.vue

@@ -0,0 +1,360 @@
+<!-- 培训记录详情 -->
+<template>
+  <div class="page-container trainingRecordDetails-addPage">
+    <div class="top-title-max-box">
+      <div class="top-title-big-box">
+        <p>{{newData.newData1}}</p>
+        <p :class="newData.newData2==2?'back-color-b':'back-color-a'">{{newData.newData2==1?'未开始':(newData.newData2==2?'进行中':(newData.newData2==3?'已结束':''))}}</p>
+        <p>{{newData.newData3}}</p>
+      </div>
+      <div class="top-title-box">
+        <div>
+          <p>培训时间：</p>
+          <p>{{newData.newData4}}</p>
+        </div>
+        <div>
+          <p>培训地点：</p>
+          <p>{{newData.newData5}} {{newData.newData6}}</p>
+        </div>
+      </div>
+      <div class="top-title-box">
+        <div>
+          <p>主讲人：</p>
+          <p>{{newData.newData7}}</p>
+        </div>
+        <div>
+          <p>可得学时：</p>
+          <p class="colorA">{{newData.newData8}}学时</p>
+        </div>
+      </div>
+      <div class="top-title-box">
+        <div>
+          <p>可得积分：</p>
+          <p class="colorB">{{newData.newData9}}积分</p>
+        </div>
+        <div>
+          <p>获得证书：</p>
+          <p>{{newData.newData10}}</p>
+        </div>
+      </div>
+    </div>
+    <div class="num-max-box">
+      <div class="num-box">
+        <p>{{newData.newData11}}</p>
+        <p>计划人数</p>
+      </div>
+      <div class="num-box">
+        <p>{{newData.newData12}}</p>
+        <p>已签到</p>
+      </div>
+      <div class="num-box">
+        <p>{{newData.newData13}}</p>
+        <p>未签到</p>
+      </div>
+      <div class="num-box">
+        <p>{{newData.newData14}}%</p>
+        <p>签到率</p>
+      </div>
+    </div>
+    <p class="title-p">实验室生物安全操作规范培训</p>
+    <div class="page-content-box">
+      <el-table class="table-box" style="padding:0;" border :data="dataList">
+        <el-table-column label="姓名" prop="name" show-overflow-tooltip/>
+        <el-table-column label="学号" prop="content" width="120" show-overflow-tooltip/>
+        <el-table-column label="学院单位" prop="content" width="160" show-overflow-tooltip/>
+        <el-table-column label="签到状态" prop="content" width="100" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p :class="scope.row.status==1?'color-a':(scope.row.status==2?'color-b':'')">{{scope.row.status==1?'已签到':(scope.row.status==2?'未签到':'')}}</p>
+          </template>
+        </el-table-column>
+        <el-table-column label="签到时间" prop="content" width="100" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{parseTime(scope.row.startTime,"{h}:{i}")}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="获得学时" prop="content" width="100" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span class="colorA">{{scope.row.content}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="获得积分" prop="content" width="100" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span class="colorB">{{scope.row.content}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="培训证明" width="100" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <div class="table-button-box">
+              <p class="table-button-null"></p>
+              <p class="table-button-p"
+                 @click="tableButton(1,scope.row)"
+                 v-hasPermiRouter="['demo:demo:detail']"
+              >查看</p>
+              <p class="table-button-null"></p>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="150" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <div class="table-button-box">
+              <p class="table-button-null"></p>
+              <p class="table-button-p"
+                 @click="tableButton(2,scope.row)"
+                 v-hasPermiRouter="['demo:demo:detail']"
+              >查看证书</p>
+              <p class="table-button-p"
+                 @click="tableButton(3,scope.row)"
+                 v-hasPermiRouter="['demo:demo:detail']"
+              >下载</p>
+              <p class="table-button-null"></p>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination :page-sizes="[20, 30, 40, 50]"
+                  v-show="total>0"
+                  :total="total"
+                  :page.sync="queryParams.page"
+                  :limit.sync="queryParams.pageSize"
+                  @pagination="getList"
+      />
+    </div>
+    <!--图片预览-->
+    <fullScreenView :fullScreenViewProps="fullScreenViewProps" ref="fullScreenView"></fullScreenView>
+    <!--文件预览-->
+    <fullScreenFileLook ref="fullScreenFileLook"></fullScreenFileLook>
+  </div>
+</template>
+
+<script>
+  import fullScreenView from "@/components/fullScreenView/fullScreenView.vue";
+  import fullScreenFileLook from "@/components/fullScreenFileLook/fullScreenFileLook.vue";
+  //import { getDicts } from "@/api/commonality/noPermission";
+  //import { systemUserSelect } from "@/api/commonality/permission";
+  export default {
+    name: 'addPage',
+    components: {
+      fullScreenView,
+      fullScreenFileLook,
+    },
+    props: {
+      propsData: {}
+    },
+    data() {
+      return {
+        newData: {
+          newData1:'辐射安全基础知识讲座',
+          newData2:'1',
+          newData3:'知识讲座',
+          newData4:'2026-07-20 14:00–16:00',
+          newData5:'物理楼',
+          newData6:'C301',
+          newData7:'陈教授',
+          newData8:'2 学时',
+          newData9:'10',
+          newData10:'实验室安全培训证书（通用）',
+          newData11:'40',
+          newData12:'18',
+          newData13:'24',
+          newData14:'60',
+        },
+        //查询条件
+        queryParams: {
+          page: 1,
+          pageSize: 20,
+        },
+        dataList:[{status:1},{status:2},],
+        //数据数量
+        total: 0,
+        //预览图片
+        fullScreenViewProps:[],
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      this.initialize()
+    },
+    methods: {
+      // 初始化
+      initialize() {
+
+      },
+      getList(){
+
+      },
+      tableButton(type){
+        if(type == 1){
+
+        }else if(type == 2){
+
+        }else if(type == 3){
+
+        }
+      },
+      //查看图片
+      fullScreenViewClick(url){
+        this.$set(this,'fullScreenViewProps',[url]);
+        this.$refs['fullScreenView'].initialize();
+      },
+      //查看文件
+      fullScreenFileLookClick(item){
+        this.$refs['fullScreenFileLook'].initialize(item.name,item.url,item.type);
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .trainingRecordDetails-addPage {
+    height:500px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .colorA{
+      color:#10a37f;
+      font-weight:600;
+    }
+    .colorB{
+      color:#e67e22;
+      font-weight:600;
+    }
+    .top-title-max-box{
+      margin-bottom:10px;
+      .top-title-big-box{
+        display: flex;
+        margin-bottom:10px;
+        p{
+          height:20px;
+          line-height:20px;
+        }
+        p:nth-child(1){
+          font-size:16px;
+          font-weight:700;
+          color:#333;
+        }
+        p:nth-child(2){
+          padding: 0 9px;
+          margin:0 10px;
+          border-radius: 20px;
+          font-size: 12px;
+          font-weight: 500;
+        }
+        p:nth-child(3){
+          padding: 0 9px;
+          border-radius: 20px;
+          font-size: 12px;
+          font-weight: 500;
+          background-color: #eef3fd;
+          color:#1857d4;
+        }
+        .back-color-a{
+          background-color: #f4f6fa;
+          color:#8896a7;
+        }
+        .back-color-b{
+          background-color: #fef6ec;
+          color:#e67e22;
+        }
+      }
+      .top-title-box{
+        display: flex;
+        div{
+          flex:1;
+          display: flex;
+          p{
+            line-height:30px;
+            font-size:13px;
+          }
+          p:nth-child(1){
+            color:#8896a7;
+          }
+          p:nth-child(2){
+
+          }
+        }
+      }
+    }
+    .title-p{
+      padding-top:20px;
+      font-size: 15px;
+      line-height:20px;
+      font-weight: 600;
+      margin-bottom: 10px;
+      color:#333;
+      border-top:1px solid #dedede;
+    }
+    .num-max-box{
+      display: flex;
+      margin-bottom:15px;
+      .num-box:nth-child(1){
+        background-color: #f5f8ff;
+        margin-right:15px;
+        p:nth-child(1){
+          color:#1857D4;
+        }
+      }
+      .num-box:nth-child(2){
+        background-color: #EDFAF6;
+        margin-right:15px;
+        p:nth-child(1){
+          color:#10A37F;
+        }
+      }
+      .num-box:nth-child(3){
+        background-color: #FFF5F5;
+        margin-right:15px;
+        p:nth-child(1){
+          color:#E53E3E;
+        }
+      }
+      .num-box:nth-child(4){
+        background-color: #FEF6EC;
+        p:nth-child(1){
+          color:#E67E22;
+        }
+      }
+      .num-box{
+        padding:12px;
+        flex:1;
+        border-radius:8px;
+        p{
+          text-align: center;
+        }
+        p:nth-child(1){
+          font-size: 24px;
+          font-weight: 700;
+        }
+        p:nth-child(2){
+          font-size:12px;
+          color: #8896a7;
+        }
+      }
+    }
+    .page-content-box{
+      flex:1;
+      padding:0;
+      .color-a{
+        display:inline-block ;
+        padding:0 10px;
+        border-radius:10px;
+        height: 23px;
+        line-height:23px;
+        font-size:14px;
+        background-color: #edfaf6;
+        color:#0d8f6f;
+      }
+      .color-b{
+        display:inline-block ;
+        padding:0 10px;
+        border-radius:10px;
+        height: 23px;
+        line-height:23px;
+        font-size:14px;
+        background-color: #fff5f5;
+        color:#e53e3e;
+      }
+    }
+  }
+</style>